CODEWITHSUNDEEP
iconsvuetify.js
tn2000
tn2000

Reputation: 758

Create Custom Icon with Vuetify

I am trying to create a custom icon using Vuetify v-icon: I follow the Docs but its doesnt work for me.

  1. I create a component with svg code: HomeIcon.vue enter image description here

  2. The vuetify.js looks like this: enter image description here

3)Now I am trying to use it in my component: enter image description here

  1. But the result is: enter image description here

Upvotes: 2

Views: 3324

Answers (1)

Mostafa Rahmati
Mostafa Rahmati

Reputation: 302

I think if you change your code in vuetify.js file it should be working fine. another trick is to always add icons after theme if you have one obviously.

Change your code to this:

import icon from "icon.vue";
export default new Vuetify({
   theme,
   icons: {
     values: {
        icon: {
         component: icon,
         },
      },
     },
   });

You can also make a shortcut by doing $icon instead of $vuetify.icons.icon.

Upvotes: 1

Related Questions