SvgVueXhr.vue

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

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

    data() {
        return {
            svgContent: null,
            svgAttributes: null,
        }
    },

    methods: {
        loadSvg(url) {
            var request = new XMLHttpRequest();

            request.onreadystatechange = () => {
                if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
                    // set svgString
                    var svgString = request.responseText.trim();

                    // set svgAttributes
                    var wrapper = document.createElement('div');
                    wrapper.innerHTML = svgString;

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

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

                    this.svgAttributes = attributes;

                    // set svgContent
                    this.svgContent = svgString.replace(/^<svg[^>]*>|<\/svg>$/g, '');
                }
            };

            request.open('GET', url, true);
            request.send();
        }
    },

    mounted() {
        this.loadSvg('/svg/' + this.icon.replace(new RegExp('.'.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), '/') + '.svg');
    }
}
</script>