[Feature Request] v-icon documentation is missing instructions for using new SVG support

[MatthewAry]

Problem to solve

SVG support was introduced into v-icon with the 1.4.0 release, however documentation of this new feature has not been included in the 1.4.0 release of the documentation making adoption difficult.

Proposed solution

Please add to the 1.4.0 documentation for v-icon instructions on how to use v-icon with svg graphics. Something that I think that should be added to this documentation in particular is how to use v-icon with npm packages such as https://www.npmjs.com/package/@mdi/js

Knowing how to use @mdi/js with v-icon in particular will mean that users of v-icon will be able to use tree shaking with material design icons and projects like it, resulting in significantly reduced payloads. Or in other words, it will teach users of vuetify to get all of the benefits of an icon font without having to download a large icon font file making their applications smaller.

[jacekkarczmarczyk]

Some info is here https://vuetifyjs.com/en/framework/icons but probably it should be mentioned also on icon component page

[MajesticPotatoe]

There is steps in the framework/icon section jacek mentions for adding FA Svg as well as other FA - based products.

You could most likely follow the same snippet found Here but just replacing it with your @mdi/js library.

Ill look into placing an alert/info in the icon section to link to the framework/icons

[jaxn]

I think that page would flow better if the FontAwesome SVG example was in the Component Icons section. And then add another example showing a custom SVG component to help fill in the gaps.

As for @mdi/js icons specifically, it doesn't look like they have an official Vue component package like FA does, but recommend vue-material-design-icons. It should work something like this (untested):

import Vue from 'vue'
import Vuetify from 'vuetify'
import MenuIcon from "vue-material-design-icons/Menu.vue"
Vue.component("menu-icon", MenuIcon)

Vue.use(Vuetify, {
  icons: {
    'menu': {
      component: MenuIcon  // maybe better to lazy-load since each icon is a component
    },
    // maybe better to lazy-load since each icon is a component?
    'more': {
      component: 'dots-vertical': () => import("vue-material-design-icons/DotsVertical.vue")
  }
})

[MajesticPotatoe]

I think the reason its in the custom component section is that is importing a library and using them as apposed to importing a vue component and using it (library of icons vs single component icons)

[MatthewAry]

However, there is a precedent for having a library import within the component docs. Look at v-form and it's Vuelidate example. For me at least, it seems that the existing docs on the subject can be further organized. For example, overriding the default icon font should probably be in the styles and themes section.

Examples of using the SVG feature with the SVG XML syntax should be included in the v-icon page. Examples of using imported icon packs using import and v-icon should probably be in the icon component docs. Using custom components with v-icons can be in the framework sections under something like Custom Icon Components.

Does this sound reasonable?

Thanks

[MajesticPotatoe]

I don't see any problem making a reference to the framework/icons page within v-icon, however the actual importing of the icons isn't specific to v-icon. granted framework/icons probably could use a little cleanup and restructuring as its grown to support 5 icon sets and custom icons.

Its possible to move the use-based snippets to v-icon. Ill have to sit down and look it over when i get a little time to do so. I got a general idea of how to organize it a little better.

[MatthewAry]

As a side note, perhaps the custom icon components documentation can be improved. I've been trying to use https://www.npmjs.com/package/vue-material-design-icons to add custom icons to vuetify, but for some reason it doesn't seem to be working. I'll ask around on discord for help and update this post if I can get a solution.

[pauldaiko]

with the svg support in this release is it possible to use our own svg image as an icon? in the feature request it states : Allows user to use his own svg icon (or even img) instead of font icons.

We have a company logo that we would like to use as a v-icon and I can't seam to find this in the documentation with this update.

[pauldaiko]

So after a lot of trial and error I managed to get this to work with our company logo.

If you take the section on the Icon docs under component icons here: https://vuetifyjs.com/en/framework/icons#component-icons

import Vue from 'vue' import Vuetify from 'vuetify' import IconComponent from './IconComponent.vue'

Vue.use(Vuetify, { icons: { 'product': { component: IconComponent, // you can use string here if component is registered globally props: { // pass props to your component if needed name: 'product' } } } })

to then use imported icon component in a v-icon :

<v-icon v-text="'$vuetify.icons.product'"></v-icon>

the same formatting works for a v-rating also:

<v-rating full-icon='$vuetify.icons.product'></v-rating>

[dfk7677]

@pauldaiko Can you please share your 'IconComponent.vue' code?

[pauldaiko]

@pauldaiko Can you please share your 'IconComponent.vue' code?

I cannot share it directly as it is for a company I work for, but I can point you to an example hidden in the PR for this feature. If you go here:

https://github.com/vuetifyjs/vuetify/pull/4910

and look in markup details for svgIcon.vue that is what the iconComponent.vue should look like

[brechtm]

If you go here:

4910

and look in markup details for svgIcon.vue that is what the iconComponent.vue should look like

I can't find an svgIcon.vue in that PR. Am I looking in the wrong place?

[johnleider]

Information for using mdi/svg's is here.

If you have any additional questions, please reach out to us in our Discord community.