[Documentation] The Example for mdiSvg icons makes the icon variables have unnecessary reactivity.

Environment

Browsers: Chrome 75.0.3770.142 OS: Mac OS 10.14.6

Steps to reproduce

Storing the imported icon value in the component data has several effects. It assumes that we are not making a functional component and it gives the variable storing the icon svg data reactivity to changes which are never going to happen.

Expected Behavior

The svg data for icons should be static and non-reactive. Every attempt should be made to eliminate any data or computational overhead with icons. We shouldn’t just try to make the payload smaller, we should also make it efficient with how it’s used.

Actual Behavior

The example places the icon svg data into the component’s data object. Vue will then add watchers to this data which shouldn’t change in most use cases, adding additional overhead to the component. The means that if the component is making use of many icons, its making many watchers.

Reproduction Link

https://vuetifyjs.com/en/customization/icons#install-material-design-icons-js-svg

Other comments

This is what is in the example:

<!-- Vue Component -->

<template>
  <v-icon>{{ svgPath }}</v-icon>
</template>

<script>
  import { mdiAccount } from '@mdi/js'

  export default {
    data: () => ({
      svgPath: mdiAccount
    }),
  }
</script>

[tomparle]

My two cents on this one (after one year). I think a computed property would be the most suited option. Here’s the pattern I use :

<template>
  <v-icon>{{icons.mdiAccount}}</v-icon>
</template>

import { mdiAccount } from '@mdi/js'
...

computed: {
    icons: () => ({
        mdiAccount
    })
}

But I wish there was some kind of smart loader that can automatically detect the used svg icons and import them, without having to do all the hassle to import and define them as properties to use them in the templates, and also avoiding a big initial payload.

[MajesticPotatoe]

well what im saying is something like this.

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { mdiAccount } from '@mdi/js'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg',
    values: {
      account: mdiAccount,
    },
  },
})

// component.vue
<!-- Vue Component -->

<template>
  <v-icon>$vuetify.icons.account</v-icon>
</template>

<script>
  export default {
    data: () => ({}),
  }
</script>