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 （我看您使用过），然后在Vuetify的模块配置中添加iconfont: 'mdi'，如下所示：

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

Answer 2

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

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

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

2 个答案: