Vue provide inject example for customisable icons

App.vue

<template>
  <ui-icon name="notes" />
  <ui-icon name="book" />
  <ui-icon name="map" />
</template>

icons.js

// add icons to the list as you need them...
export default {
  notes: require('./notes.svg'),
  book: require('./book.svg'),
  map: require('./map.svg'),
}

main.js

// App
import App from 'App.vue'

// fixed icon component
import UiIcon from 'UiIcon.vue'
Vue.component('ui-icon', UiIcon)

// flexible icon assets
import icons from 'icons.js'

// run all
const app = new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  provide: {
    icons
  }
})
 

UiIcon.vue

<template>
  <i class="icon svg-icon" v-html="svg"></i>
</template>

<script>

  export default {

    inject: ['icons'],

    props: {
      'name': String
    },

    computed: {
      svg () {
        if (!this.icons) {
          throw new Error(message)
        }
        const svg = this.icons[this.name]
        if (!svg) {
          throw new Error(`Unknown icon "${this.name}"`)
        }
        return svg
          .replace(/<\?xml.+?>/, '')
          .replace(/<!--.+?-->/, '')
      }
    },

  }

  const message = `Warning: icons definitions have not been provided!

Add...

  provide: {
    icons: {
      foo: '<svg> ... </svg>',
      ...
    }
  }

...to your app's declaration to inject SVG icon definitions.

See https://vuejs.org/v2/api/#provide-inject for more info`

</script>