Vue：离线使用material-design-icons / size答案

【问题标题】：Vue: Using material-design-icons offline / sizeVue：离线使用material-design-icons / size
【发布时间】：2019-02-08 14:31:05
【问题描述】：

我在我的 vue 项目中使用了 materialdesignicons。

require ('../node_modules/@mdi/font/css/materialdesignicons.min.css);
Vue.use(Vuetify, {iconfont:'mdi'});

我有一些动态创建的图标：

 <v-icon>{{ some-mdi-file }}</v-icon>

当我通过 (npm run build) 为生产构建时，我收到以下错误：

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  img/materialdesignicons-webfont.someHash.svg (3.77 MiB)

这个文件很大，因为它包含了每个图标，不管它是否被使用。有没有办法通过仅打包使用的特定图标来缩小文件大小。我应该使用不同的软件包吗？警告：该项目是离线托管的，因此我需要将字体直接包含在我的项目中。

我查看了 vue-material-design-icons，但它看起来可能不适用于动态图标名称，并且它没有说明整体文件大小/性能。

我也看过这里，但是单击“尺寸警告”链接会将我带到未填写 Vue 部分的页面 https://dev.materialdesignicons.com/getting-started/webfont

【问题讨论】：

标签： vue.js svg npm vuetify.js material-design-icons

【解决方案1】：

我建议为此使用 @mdi/js 包，它为每个图标提供 SVG 路径并支持摇树。目前 Vuetify 不支持 SVG 图标但 it should in the future.

现在，创建自定义图标组件已经很容易了：

<template>
    <svg :class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path :d="path" />
    </svg>
</template>

<script>
export default {
    name: 'my-icon',

    data: () => ({
        path: '',
    }),

    methods: {
        updatePath() {
            if (!this.$scopedSlots) return
            if (typeof this.$scopedSlots.default !== 'function') return

            this.path = this.$scopedSlots
                .default()
                .map((n) => n.text)
                .join('')
        },
    },

    mounted() {
        this.updatePath()
    },

    updated() {
        this.updatePath()
    },
}
</script>

<style scoped>
.icon {
    display: block;
    color: inherit;
    fill: currentColor;
    width: 24px;
    height: 24px;
}
<style>

然后要使用它，你只需要导入你的组件和你要使用的图标：

<template>
    <div class="app">
        <my-icon>{{mdiCheck}}</my-icon>
    </div>
</template>

<script>
import MyIcon from 'path/to/my/icon.vue'
import { mdiCheck } from '@mdi/js'

export default {
    name: 'my-app',

    components: {
        MyIcon,
    }

    data: () => ({
        mdiCheck,
    }),
}
</script>

【讨论】：