Vue component for loading svg's

Icon.vue

<template>
    <span v-html="svg" class="cursor-pointer" @click="$emit('click')"></span>
</template>

<script>
	export default {
		name: "Icon",
        props: ['id', 'fill', 'height', 'width', 'className'],
        computed: {
            svg() {
            	return require(`../icons/${this.id}.svg`);
            }
        },

        mounted() {
			try {
				if (this.fill) this.$el.firstChild.setAttribute('fill', this.fill);
				if (this.width) this.$el.firstChild.setAttribute('width', this.width);
				if (this.height) this.$el.firstChild.setAttribute('height', this.height);
				if (this.className) this.$el.firstChild.setAttribute('class', this.$el.firstChild.getAttribute('class') + ' ' + this.className);
			} catch (e) {

            }
        }
	};
</script>

mix.override(config => {
    config.module.rules.find(rule => rule.test.test('.svg')).exclude = /\.svg$/;

    config.module.rules.push({
        test: /\.svg$/,
        use: [{ loader: 'html-loader' }]
    })
});

Add above to webpack.mix.js!

Make sure to alter the require path as well!