vuetifyjs:仅添加使用过的图标来构建 [英] vuetifyjs: Adding only used icons to build

问题描述

我目前正在使用默认的Material Design Icons"构建 vuetifyjs-app.在生产版本中，我只使用了这种字体的 2 个图标(由 vuetify-component 芯片使用).

I'm currently build a vuetifyjs-app with the default "Material Design Icons". In the production build I only use 2 Icons of this font (used by vuetify-component chips).

按照推荐，我包含了完整的图标字体

As recommend I included the complete iconfont with

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

But the production-build this force the user to download almost 0.5MB of Data only for 2 icons. Is there any way to:

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

推荐答案

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

We recommend using @mdi/js where possible. This provides an ES Module which exports the SVG path of every icon in the icon set and supports treeshaking. You simply pass the icon string to an SVG path element or in this case you can pass it directly to v-icon if you specify the icon font in the Vuetify config: 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

You can read more about integration with Vuetify here: https://vuetifyjs.com/en/customization/icons#install-material-design-icons-js-svg

这篇关于vuetifyjs:仅添加使用过的图标来构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！