使用 Vuetify 创建自定义图标

Question

我正在尝试使用 Vuetify v-icon 创建自定义图标： 我遵循文档，但它对我不起作用。

1. 我用 svg 代码创建了一个组件： HomeIcon.vue

2. vuetify.js 看起来像这样：

3)现在我想在我的组件中使用它：

4. 但结果是：

Answer 1

我认为如果您更改 vuetify.js 文件中的代码，它应该可以正常工作。 另一个技巧是总是在主题之后添加图标，如果你有的话。

将您的代码更改为：

import icon from "icon.vue";
export default new Vuetify({
   theme,
   icons: {
     values: {
        icon: {
         component: icon,
         },
      },
     },
   });

您也可以通过 $icon 代替 $vuetify.icons.icon 来创建快捷方式。