如何在 Nuxt 中导入 nuxt.config.js 中的 mdi 图标模块 [英] How to import the mdi icons module inside nuxt.config.js in Nuxt

问题描述

我已经安装了 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 选项卡示例.

Here is an example of a Vuetify tab using a MDI icon.

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

推荐答案

您可以通过将 @mdi/font/css/materialdesignicons.min.css 添加到您的 nuxt.config 中来实现.js 像这样:

You can do it by adding @mdi/font/css/materialdesignicons.min.css into your nuxt.config.js like this:

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' ，像这样:

And if you use Vuetify (I see you used it) Then add iconfont: 'mdi' in Vuetify module configuration, like this:

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

这篇关于如何在 Nuxt 中导入 nuxt.config.js 中的 mdi 图标模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！