SvgVue.vue

<template>
    <svg
        v-bind="svgAttributes"
        v-html="svgContent"
    >
    </svg>
</template>

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

    data() {
        return {
            svgMap: import.meta.glob('/resources/svg/**/*.svg', { as: 'raw', eager: true }),
        }
    },

    computed: {
        iconPath: {
            cache: false,

            get() {
                return this.icon.replace(new RegExp('.'.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), '/');
            },
        },

        svgString() {
            return this.svgMap['/resources/svg/' + this.iconPath + '.svg']
        },

        svgAttributes() {
            if (! this.svgString) return {};

            let wrapper = document.createElement('div');
            wrapper.innerHTML = this.svgString;

            let attributesList = wrapper.firstElementChild.attributes;
            let attributes = {};

            Object.keys(attributesList).map(i => attributes[attributesList[i].name] = attributesList[i].value);

            return attributes;
        },

        svgContent() {
            return this.svgString ? this.svgString.replace(/^<svg[^>]*>|<\/svg>$/g, '') : null;
        },
    },
}
</script>

app.js

// ...

import SvgVue from '@/Components/SvgVue.vue';

// ...

Vue.component('svg-vue', SvgVue);

// ...