How To Add Custom SVG Icon in Vuetify - Vue

问题

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

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>

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>.

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

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

回答1:

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.

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>

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.

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.

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.

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

回答2:

Per vuetify v2 docs

Create custom component which contains the svg icon code

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

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

Use it like so

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

Or shortcut:

<v-icon>$custom</v-icon>

回答3:

So basically I think you've misread how Vuetify Icons work, there not for use with actual svg files, rather they work using icon fonts such as what font awesome and material provide. The custom component is a way in which you can register a global component that uses a preprovided string which calls an icon using it's font name.

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'
  }
})

Here you can see that were registering material design icons and then were passing in the icons object that is used as a key->value map for call the desired icon. This is done for simplicity and because icon fonts often use charchters that can't be used as keys effecitvely(i.e. mdi-dropbox becomes $vuetify.icons.product in the above).

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

Here we are creating a custom component that has logic baked into it and becomes reusable due to the fact it's encapsulated the icons logic inside of it. Though were still using the same icon font as the default and or passed as a prop, unfortunately nothing has changed here.

Honestly unless you have a lot of icons then making a font icon sounds like overkill, it might be simpler just to create an icon component and pass in the svg to be rendered in a simple <img> tag and using css to manipulate how it sits / looks.

来源：https://stackoverflow.com/questions/51614557/how-to-add-custom-svg-icon-in-vuetify-vue

标签

svg

vuejs2

icons

vuetify.js