我目前正在使用默认的“Material Design Icons”构建一个 vuetifyjs-app。在生产版本中,我只使用了这种字体的 2 个图标(由 vuetify-component 芯片使用)。
按照建议,我将完整的图标字体包含在<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
但是生产构建这迫使用户下载几乎 0.5MB 的数据,仅用于 2 个图标。
有没有办法:
或
最佳答案
我们建议使用 @mdi/js在可能的情况。这提供了一个 ES 模块,它导出图标集中每个图标的 SVG 路径并支持 treeshaking。您只需将图标字符串传递给 SVG 路径元素,或者在这种情况下,您可以将其直接传递给 v-icon
如果您在 Vuetify 配置中指定图标字体:iconfont: 'mdiSvg'
.
安装
npm install @mdi/js
用法
<template>
<v-icon>{{ mdiCheck }}</v-icon>
</template>
<script>
import { mdiCheck } from '@mdi/js'
export default {
data: () => ({
mdiCheck,
}),
}
</script>
您可以在此处阅读有关与 Vuetify 集成的更多信息:https://vuetifyjs.com/en/customization/icons#install-material-design-icons-js-svg
关于javascript - vuetifyjs : Adding only used icons to build,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57552261/