如何在 Nuxt 的 nuxt.config.js 中导入 mdi 图标模块答案

【问题标题】：How to import the mdi icons module inside nuxt.config.js in Nuxt如何在 Nuxt 的 nuxt.config.js 中导入 mdi 图标模块
【发布时间】：2021-01-20 04:20:51
【问题描述】：

我已经安装了https://materialdesignicons.com/

npm install @mdi/font

在 nuxt.config.js 文件中，我不知道如何导入图标模块...请帮助！

export default {
    build: {
      /*
       ** You can extend webpack config here
       */

      extend(config, ctx) {}
    },
    buildModules: [
      // Simple usage
      '@nuxtjs/vuetify',
  
      // With options
    //  ['@nuxtjs/vuetify', { /* module options */ }]
    ]
}

这是一个使用 MDI 图标的 Vuetify 选项卡示例。

<v-icon large color="blue darken-2">mdi-message-text</v-icon>

【问题讨论】：

标签： nuxt.js vuetify.js

【解决方案1】：

您可以像这样将@mdi/font/css/materialdesignicons.min.css 添加到您的nuxt.config.js 中：

export default {
    css : [
       '@mdi/font/css/materialdesignicons.min.css'
    ],
    build: {
      /*
       ** You can extend webpack config here
       */

      extend(config, ctx) {}
    }
    /* Rest of configs */
}

如果你使用了 Vuetify （我看到你用过） 然后在 Vuetify 模块配置中添加iconfont: 'mdi'，像这样：

export default {
    css : [
       '@mdi/font/css/materialdesignicons.min.css'
    ],
    buildModules: [
      '@nuxtjs/vuetify',
      ['@nuxtjs/vuetify', { iconfont: 'mdi' }]
    ]
    /* Rest of configs */
}

【讨论】：

这实际上让我在灯塔上的得分更差......：/我正在尝试一种更好的方法，因为 vuetify 很糟糕！
如何使用 'md' 包来代替，例如 vuetify 文档谈论的自定义 repo：github.com/jossef/material-design-icons-iconfont 一直在尝试不同的解决方案，但似乎无法做到正确

【解决方案2】：

SMAKSS 提供的解决方案有效，但我必须在 vuetify 模块配置中配置 defaultAssets: false 以避免从 CDN 下载。

https://github.com/nuxt-community/vuetify-module#defaultassets

【讨论】：