Nuxt Vuetify 模块 - 自定义组件图标不起作用答案

【问题标题】：Nuxt Vuetify Module - Custom Component icons does't workNuxt Vuetify 模块 - 自定义组件图标不起作用
【发布时间】：2020-03-20 22:43:39
【问题描述】：

模块版本 @nuxtjs/vuetify - 1.8.3 nuxt 2.9.2

描述错误 无法导入自定义创建的组件图标。 https://vuetifyjs.com/en/customization/icons#component-icons

复制 https://codesandbox.io/s/nuxtjs-vuetify-z42mm

重现行为的步骤： 1. index.vue上，图标很少。未显示自定义创建的图标。没有错误，没有警告。

预期行为 我希望可以使用 $vuetify.icons.values.ionic 访问自定义图标，但此组件不是在 $vuetify.icons 对象中创建的。

此外，不能像这样从 vuetify.options.js 更改 vuetify 字体：

icons: {
  iconfont: 'fa4',
  values: {
    customIcon: customIconComponent
  }
}

也许他们是相关的......

【问题讨论】：

标签： vuetify.js nuxt.js

【解决方案1】：

这对我有用：

在 Nuxt Vuetify 配置中添加选项路径，例如optionsPath: '~/plugins/vuetify.js'。
添加导出图标的plugins/vuetify.js文件，例如：

import SearchIcon from '~/components/icons/SearchIcon.vue'

export default {
  icons: {
    values: {
      search: {
        component: SearchIcon,
      }
    }
  }
}

现在可以使用带有$vuetify.icons 前缀的已定义图标，例如：

<v-icon>$vuetify.icons.search</v-icon>

【讨论】：

【解决方案2】：

我遇到了同样的问题，我用 Minaro 回复解决了它：

我的 vuetify 配置不在单独的文件中，而是在 nuxt.config.js 中。
由于 treeShake 选项，我不得不将“@nuxtjs/vuetify”放入 buildModules 列表中。
然后我的自定义图标无法加载/无法访问
我也把“@nuxtjs/vuetify”放到了modules列表中

但是现在，分离 vuetify 配置解决了问题：

nuxt.config.js：

modules: ["@nuxtjs/vuetify"],

vuetify: {
   optionsPath: "./plugins/vuetify.js",
   customVariables: ["~/assets/css/variables.scss"],
   treeShake: true
}

vuetify.js：

import MyCustomIcon from "~/components/MyCustomIcon.vue";

export default {
  theme: { ...},
  icons: {
    values: {
        myCustomIcon: {
            component: MyCustomIcon,
        },
    },
}

【讨论】：

【解决方案3】：

使用自定义图标： nuxt.config

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    optionsPath: '~/plugins/vuetify.js',
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

和： 插件/vuetify.js

import Redux from '~/components/icons/redux.vue'
import ReduxSaga from '~/components/icons/redux-saga.vue'
import Jwt from '~/components/icons/jwt.vue'
import Express from '~/components/icons/express.vue'
import MongoDB from '~/components/icons/mongodb.vue'
import Sdl from '~/components/icons/sdl.vue'
import Webpack from '~/components/icons/webpack.vue'
import Yarn from '~/components/icons/yarn.vue'


export default {
  icons: {
    values: {
      redux: {
        component: Redux,
      },
      saga: {
        component: ReduxSaga,
      },
      jwt: {
        component: Jwt,
      },
      express: {
        component: Express,
      },
      mongodb: {
        component: MongoDB,
      },
      sdl: {
        component: Sdl,
      },
      webpack: {
        component: Webpack,
      },
      yarn: {
        component: Yarn,
      }
    }
  }
}

【讨论】：