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

我正在使用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，其中提到了有关使用自定义图标的信息，但我认为这也没有帮助。

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

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中。

关于svg - 如何在Vuetify中添加自定义SVG图标-Vue，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51614557/