Vue:使用material-design-icons offline / size

Question

我在我的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，但它看起来可能不适用于动态图标名称，并且它没有说明总体文件大小/性能。

我也看过这里，但单击'size warning‘链接会将我带到一个页面，其中的Vue部分没有填写https://dev.materialdesignicons.com/getting-started/webfont

Answer 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>