Inline SVG Vue Component

Icon.vue

<template>
    <svg v-bind="attributes" v-html="html"></svg>
</template>

<script>
export default {
    props: ['name'],

    data: () => ({
        attributes: {},
        html: '',
    }),

    created() {
        const div = document.createElement('div')
        div.innerHTML = require('../../' + this.name + '.svg')

        const fragment = document.createDocumentFragment()
        fragment.appendChild(div)

        const svg = fragment.querySelector('svg')

        const attributes = Array.from(svg.attributes).reduce((attrs, attr) => {
            attrs[attr.name] = attr.value

            return attrs
        }, {})

        this.attributes = Object.assign(attributes, this.$attrs)

        this.html = svg.innerHTML
    },
}
</script>