Vue.js Vue：脱机使用材质设计图标/尺寸

我正在vue项目中使用MaterialDesignics

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

我动态创建了一些图标：

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

该文件的大小非常大，因为它包含每个图标，而不管是否正在使用。是否有一种方法可以通过只打包使用的特定图标来缩小文件大小。我应该使用不同的软件包吗？警告：该项目是离线托管的，所以我需要将字体直接包含在我的项目中

我查看了vue材质设计图标，但它似乎不适用于动态图标名称，并且它没有说明总体文件大小/性能

我也查看了这里，但单击“大小警告”链接会看到一个页面，其中Vue部分没有填写

---

我建议使用该软件包，该软件包为每个图标提供SVG路径，并支持树抖动。目前Vuetify不支持SVG图标，但支持

目前，创建自定义图标组件非常简单：

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

导出默认值{
名称：“我的图标”，
数据：（）=>({
路径：“”，
}),
方法：{
updatePath（）{
如果（！this.$scopedSlots）返回
if（type of this.$scopedSlots.default！=='function'）返回
this.path=this.$scopedSlots
.default（）
.map（（n）=>n.text）
.加入（“”）
},
},
安装的（）{
this.updatePath（）
},
更新的（）{
this.updatePath（）
},
}
.图标{
显示：块；
颜色：继承；
填充：当前颜色；
宽度：24px；
高度：24px；
}

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

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

{{mdiCheck}
将MyIcon从“path/to/my/icon.vue”导入
从'@mdi/js'导入{mdiCheck}
导出默认值{
名称：“我的应用程序”，
组成部分：{
我的图标，
}
数据：（）=>({
MDI检查，
}),
}

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