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

Posted 2021-04-09

我正在使用vuetify 1.1.8和vue 3.0.0-rc.3。我正在尝试使用我设计的项目中的一些自定义SVG图标，而不是来自vuestify支持的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，但我认为这也没有帮助。

有人可以帮我解决这个问题。也许我应该尝试使用材质角度支持的精灵图像

TL; DR

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

答案

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

要创建vue组件图标，只需在模板标签内放置一个SVG，如Vue Cookbook所示。本文档也可以帮助您在任何vue应用程序中使用该组件。

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

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

在那里，你可以注册你的组件，如Vuetify's site所示（你已经提到过这个链接），但也许这个文档是更新或不清楚。

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

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

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

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

另一答案

所以基本上我认为你误读了Vuetify Icons的工作原理，没有用于实际的svg文件，而是使用图标字体，如字体真棒和材料提供。自定义组件是一种可以注册使用预制字符串的全局组件的方法，该字符串使用字体名称调用图标。

Vue.use(Vuetify, {
  iconfont: 'mdi',
  icons: {
    'product': 'mdi-dropbox',
    'support': 'mdi-lifebuoy',
    'steam': 'mdi-steambox',
    'pc': 'mdi-desktop-classic',
    'xbox': 'mdi-xbox',
    'playstation': 'mdi-playstation',
    'switch': 'mdi-nintendo-switch'
  }
})

在这里，您可以看到正在注册材料设计图标，然后传入icons对象，该对象用作键 - >值图，用于调用所需图标。这样做是为了简单起见，因为图标字体通常使用不能有效地用作密钥的charchters（即mdi-dropbox在上面变为$ vuetify.icons.product）。

<template>
  <div class="my-component">
    <v-icon v-text="icon"></v-icon>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    props: {
      icon: {
        type: String,
        default: '$vuetify.icons.cancel'
      }
    }
  }
</script>

在这里，我们创建了一个自定义组件，其中包含逻辑并且由于它封装了其中的图标逻辑而变得可重用。虽然仍然使用与默认相同的图标字体，或者作为道具传递，但遗憾的是这里没有任何改变。

老实说，除非你有很多图标，然后制作一个字体图标听起来有点矫枉过正，可能更简单的是创建一个图标组件并传入svg以在简单的<img>标签中呈现并使用css来操纵它如何坐/看起来。