vuetifyjs：仅将使用的图标添加到构建中

Question

我目前正在使用默认的"Material Design Icons"构建一个vuetifyjs-app。在生产构建中，我只使用了此字体中的2个图标（由vuetify-component chips使用）。

按照推荐，我包含了完整的iconfont：

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

但是在生产构建中，这会强制用户下载近0.5MB的数据仅用于2个图标。是否有方法：

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

- mdunisch

Answer 1

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

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

- James Coyle

---

谢谢！回过头来看文档，这一点很清楚，但是这个问题让我在过去的一周里苦恼不已！ - Andrew