如何在Vuetify中添加自定义SVG图标-Vue

Question

我正在使用vuetify 1.1.8和vue 3.0.0-rc.3。我正在尝试使用我设计的项目中的一些自定义SVG图标，而不是vuetify支持的Material Icons或FontAwesome Icons中的默认图标

我尝试使用vue-svg-loader加载我的自定义svg图标，并将它们用作组件。像这样

<template>
    <icon-one></icon-one>
</template>

<script>
    import iconOne from './public/iconOne.svg'
    export default{
        components:{
                 iconOne
          }
    }
</script>

但是问题vue-svg-loader在于我无法在拥有自由<v-text-field>的append-icon和其他许多地方使用它们<v-icon>。

我还阅读了他们提到的有关使用自定义图标的vuetify文档，但我认为这也没有帮助。

有人可以帮我这个忙。也许我应该尝试由材质角度支持的精灵图像

TL; DR

我有自定义的自制SVG图标，我想像<v-icon>customIcon</v-icon>在vuetify中一样使用它们

Answer 1

每个 vuetify v2文档

创建包含 svg 图标代码的自定义组件

// CustomIcon.vue
<template>
  <svg>
    ...
  </svg>
</template>

在vuetify配置中包含自定义图标组件：

// vuetify.ts

import CustomIcon from '@/components/CustomIcon.vue'

export default new Vuetify({
  theme: {/**/},
  icons: {
    values: {
      custom: { // name of our custom icon
        component: CustomIcon, // our custom component
      },
    },
  },
})

像这样使用它

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

或快捷方式：

<v-icon>$custom</v-icon>

Answer 2

实际上，您可以在其自己的Vue单个文件组件中创建一个vue图标，然后注册该组件，以便vuetify可以在VICon（v-icon）组件内部使用它。

要创建Vue组件图标，只需将SVG放在Vue Cookbook中显示的模板标签内。本文档还应帮助您在任何vue应用程序中使用该组件。

<template>
    <svg>...</svg>
</template>

接下来，您需要向vuetify注册​​该组件。Vuetify配置有时在索引文件中，或者在现代的vue-cli中，可以在@ / src / plugins / vuetify.js中找到。

您可以在此处注册组件，如Vuetify网站上所示（您已经提到了此链接），但是此文档可能是更新的或不清楚的。

现在，该组件将被注册，并且可以在VApp内部的任何位置使用。但是，与标准图标不同，您需要在v-icon插槽内使用$ vuetify.icons。[icon-name]。在Vuetify示例中，图标被注册为“产品”。要使用此功能，您需要添加

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

我正在一个正在进行的项目中工作。我将在此处保留当前状态的一个分支。

图标组件位于/ src / icons中。Vuetify配置位于/ src / plugins中，而svg图标组件位于/src/components/PlotSelector.vue中。