如何在 Vuetify 中添加自定义 SVG 图标 - Vue [英] How To Add Custom SVG Icon in Vuetify - Vue

问题描述

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

I'm using vuetify 1.1.8 and vue 3.0.0-rc.3. I am trying to use some of the custom SVG icons in my project, which I have designed, instead of default icons from Material Icons or FontAwesome Icons which are supported by vuetify

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

I have tried using vue-svg-loader to load my custom svg icons, and use them as components. Something like this

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

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

但是 vue-svg-loader 的问题是我不能在 的 append-icon<中使用它们/code> 和许多其他我可以自由使用 的地方.

But the problem with vue-svg-loader is that I cannot use them in <v-text-field>'s append-icon and many other places where I had freedom with <v-icon>.

我还阅读了他们提到的 vuetify 文档使用自定义图标，但我认为这也无济于事.

I have also read the vuetify docs where they have mentioned about using custom icons but I don't think that is helping too.

有人能帮我解决这个问题吗?可能我应该尝试材质角度支持的精灵图像

Can someone help me out with this. May be I should try sprite-images as supported by material angular

TL;博士

我有自定义的自制SVG图标，我想在vuetify中将它们用作customIcon

I have custom self-made SVG Icons, and I want to use them as <v-icon>customIcon</v-icon> in vuetify

推荐答案

Per vuetify v2 docs

Per vuetify v2 docs

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

Create custom component which contains the svg icon code

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

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

Include the custom icon component in vuetify config:

// 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
      },
    },
  },
})

像这样使用

$vuetify.icons.custom

或快捷方式:

$custom

这篇关于如何在 Vuetify 中添加自定义 SVG 图标 - Vue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！