我目前正在使用默认的“Material Design Icons”构建一个 vuetifyjs-app。在生产版本中,我仅使用该字体的 2 个图标(由 vuetify 组件芯片使用)。
按照建议,我包含了完整的 iconfont
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected] /cdn-cgi/l/email-protection/css/materialdesignicons.min.css" rel="stylesheet">
但生产版本迫使用户仅下载 2 个图标的近 0.5MB 数据。
有什么办法可以:
- 仅在 CDN 请求中包含所需的图标
或者
- 使用 Tree-Shaking 只包含主 CSS 文件中需要的图标? (我正在使用parcel.js构建器)
我们建议使用@mdi/js https://www.npmjs.com/package/@mdi/js在可能的情况。这提供了一个ES模块,它导出图标集中每个图标的SVG路径并支持treeshaking。您只需将图标字符串传递给 SVG 路径元素,或者在本例中您可以将其直接传递给v-icon
如果您在 Vuetify 配置中指定图标字体:iconfont: 'mdiSvg'
.
安装
npm install @mdi/js
Usage
<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 https://vuetifyjs.com/en/customization/icons#install-material-design-icons-js-svg
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)