Vuetify + Nuxt + 本地添加 md 图标

Question

如何在本地导入“md”图标，类似于如何在这篇文章中导入 mdi 图标： 如何在 Nuxt 中的 nuxt.config.js 中导入 mdi 图标模块

标准包或自定义存储库 https://github.com/jossef/material-design-icons-iconfont 我正在使用 nuxt-vuetify 插件。我所有的尝试都失败了，例如添加以下内容：

nuxt.config.js

css: ['~/assets/main.css', './node_modules/material-design-icons-iconfont/dist/material-design-icons.css'],

vuetify: {
  customVariables: ['~/assets/variables.scss'],
  treeShake: true,
  defaultAssets: {
    font: false,
    icons: 'md',// this just fetches it from the repo
// icons: {iconfont: 'md'} // this doesn't seem to work for me
    enter code here
    },
    theme: {
      dark: false,
      themes: {
        light: {
          primary: '#fec655',
        },
      }
    }
  },

Answer 1

我发布后立即解决了这个问题。最终，原题中的设置是正确的。只需从原始来源安装“md”包或https://www.npmjs.com/package/material-design-icons-iconfont

之后，只需更改全局 CSS 导入即可。例如 css: ['./node_modules/material-design-icons-iconfont/dist/material-design-icons.css'],

旁注是，通过为 treesshaken 版本安装 mdi/js 并手动导入，似乎可以同时使用“md”和“mdi”。这样，您可以使用所有组件的默认图标，但如果需要，仍然可以从 MDI 添加更多图标。由于“mdi”包大约 330kb，而“md”包只有 80kb 左右，这节省了大量空间。