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

问题描述

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

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的问题是我不能在<v-text-field>的append-icon和我可以自由使用<v-icon>的许多其他地方使用它们.

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; DR

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

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

推荐答案

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

You can, indeed, create a vue icon inside of its own Vue single file component, and then register this component so that vuetify can use it inside of the VICon (v-icon) component.

要创建Vue组件图标，只需将SVG放在模板标签内，如

To create a vue component icon, you just need to place an SVG inside of the template tags as shown in the Vue Cookbook. This document should help you use the component in any vue app, as well.

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

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

Next, you need to register this component with vuetify. The Vuetify config is sometimes in the index file, or in the modern vue-cli, it will be found in @/src/plugins/vuetify.js.

在那里，您可以按照 Vuetify的网站(您已经提到了此链接)，但也许此文档是更新的或不清楚的.

There, you can register your component as shown on Vuetify's site (you already mentioned this link), but maybe this documentation is an update or unclear.

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

Now this component will be registered and can be used anywhere inside of VApp. However, unlike standard icons, you need to use $vuetify.icons.[icon-name] inside the slot of v-icon. In the Vuetify example, the icon is registered as 'product.' To use this, you'd include

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

我正在一个正在进行的项目中工作.我将在此处离开分支.

I have this working in an on-going project. I'll leave a branch of the current state here.

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

The icon component is in /src/icons. The Vuetify config is in /src/plugins, and svg icon component is in /src/components/PlotSelector.vue.

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