Nuxt Vuetify Module - 自定义组件图标不起作用

Question

模块版本@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 更改 vuetify 字体.js如下所示：

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

也许它们是相关的...

Answer 1

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

• 我的 vuetify 配置不是在一个单独的文件中，而是在nuxt.config.js中。
• 由于treeShake选项，我不得不将"@nuxtjs/vuetify"放在buildModules列表中。
• 但是后来我的自定义图标无法加载/访问
• 我也把"@nuxtjs/vuetify"放在模块列表中

但是现在，分离 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,
},
},
}

Answer 2

要使用自定义图标：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
}
}
}
},

和：plugins/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,
}
}
}
}

Answer 3

这对我有用：

• 在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>