Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Vue provide inject example for customisable icons
<ui-icon name="notes" />
<ui-icon name="book" />
<ui-icon name="map" />
// add icons to the list as you need them...
export default {
notes: require('./notes.svg'),
book: require('./book.svg'),
map: require('./map.svg'),
// 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: {
<i class="icon svg-icon" v-html="svg"></i>
export default {
inject: ['icons'],
props: {
'name': String
computed: {
svg () {
if (!this.icons) {
throw new Error(message)
const svg = this.icons[]
if (!svg) {
throw new Error(`Unknown icon "${}"`)
return svg
.replace(/<\?xml.+?>/, '')
.replace(/<!--.+?-->/, '')
const message = `Warning: icons definitions have not been provided!
provide: {
icons: {
foo: '<svg> ... </svg>',
} your app's declaration to inject SVG icon definitions.
See for more info`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.