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

Question

我已经安装了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>

Answer 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 （我看到你用过它）然后添加iconfont: 'mdi'Vuetify 模块配置，如下所示：

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