Vuetify + Nuxt + 本地添加 md 图标

Question

如何在本地导入 'md' 图标，类似于他们在此 post 中导入 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

我一发帖就解决了。最终，原题中的设置是正确的。只需从原始来源或 https://www.npmjs.com/package/material-design-icons-iconfont

安装 'md' 软件包

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

旁注是，通过为 treesaken 版本安装 mdi/js 并手动导入，似乎可以同时使用 'md' 和 'mdi'。这样，您可以为所有组件使用默认图标，但仍可以根据需要从 MDI 添加更多图标。由于 'mdi' 包大约 330kb，而 'md' 包只有 80kb 左右，这节省了很多 space.

Vuetify + Nuxt + 本地添加 md 图标

Vuetify + Nuxt + locally add md icons

vue.js

nuxt.js

vuetify.js