CODEWITHSUNDEEP
cssvuejs2componentsoverridingvuetify.js
Jord
Jord

Reputation: 265

Override Vuetify Icon component

I have created a component which wraps the default component to make it behave better with font-awesome.

Since font-awesome icons are not square it leads to inconsistent sizing and alignment issues. I resolved this by creating a wrapper which forces the element to be square and by using "font-size: 100%;" it ensure the irregularly shaped icon is contained.

Problem is that all of the vuetify components which have the "prepend-icon" / "append-icon" still appears badly when using font-awesome.

I would like to know if there is a way to import v-icon under a different name, use it in my wrapper component then define my wrapper as the rightful v-icon. Which in theory would resolve the alignment/sizing of all the vuetify components using prepend/append icon.

Does anyone have any knowledge how I could override a library component like this?

Thanks

Upvotes: 1

Views: 1431

Answers (1)

Hassan Ahmed
Hassan Ahmed

Reputation: 405

I've done a very similar thing, where I had to replace the default icons (in an older version of Vuetify) with SVG ones throughout the project while still wanting to use the v-icon component.

I ended up creating a custom icon component, called let's say, SVGIcon.vue. Then I defined some icon names like so:

Vue.use(Vuetify, {
  icons: {
    // reusable custom icon
    'vuejs': {
      component: FontAwesomeIcon,
      props: {
        icon: ['fab', 'vuejs']
      }
    }
  }
})

(Example taken from the Vuetify documentation.)

You could also pass customized 'props' to each icon that you define.

Finally, you can use it like this:

<v-icon>$vuetify.icons.vuejs</v-icon> (vuejs being the name of the icon.)

This is what I ended up doing at least. For you, this might be too long-winded. In any case, do let me know what you think of this approach.

Upvotes: 1

Related Questions