svg - 如何在 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 docs他们提到了使用自定义图标，但我认为这也没有帮助。

有人可以帮我解决这个问题吗？也许我应该尝试 Material 角度支持的 Sprite 图像

TL;博士

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

Answer 1

根据 vuetify v2 docs

创建包含 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>