vuetifyjs：仅添加使用过的图标来构建

Question

我目前正在使用默认的“材料设计图标”构建一个 vuetifyjs-app。在生产版本中，我只使用了这种字体的 2 个图标（由 vuetify-component 芯片使用）。

按照建议，我包含了完整的 iconfont

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">

但是生产构建这迫使用户仅为 2 个图标下载近 0.5MB 的数据。有没有什么办法：

• 在 CDN 请求中仅包含需要的图标或
• 使用 Tree-Shaking 在主 CSS 文件中只包含需要的图标？（我正在使用parcel.js builder）

Answer 1

我们建议尽可能使用@mdi/js。这提供了一个 ES 模块，可以导出图标集中每个图标的 SVG 路径并支持 treeshaking。您只需将图标字符串传递给 SVG 路径元素，或者在这种情况下，v-icon如果您在 Vuetify 配置中指定图标字体，则可以直接将其传递给：iconfont: 'mdiSvg'。

安装

npm install @mdi/js

用法

npm install @mdi/js

您可以在此处阅读有关与 Vuetify 集成的更多信息：https ://vuetifyjs.com/en/customization/icons#install-material-design-icons-js-svg