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

Posted 2023-02-22

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

【英文标题】：How to import the mdi icons module inside nuxt.config.js in Nuxt

【发布时间】：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>

【参考方案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