[Vuejs]-Vue.js : ID's are not displayed during the load of SVG file

by

0👍

I’ve encountered the exactly the same problem. Assuming you’re using vue-svg-loader to import the svg files, the issue is that the loader drops some attributes, including the IDs.

My solution was not to import the svg files, but rather paste the content directly into a vue component.

// myIcon.vue
<template>
   <svg version="1.1"...>
     <path id="81A" .../>
   </svg>
</template>

Now if you import myIcon.vue, all the attributes will be preserved.

0👍

Ok. So the problem was coming from vue-svg-loader and I was able to find a quick fix by adding the following to the vue.config. If anyone encounters the same issue. Basically add {cleanupIDs: false}, to the svgRule. Seems like by default vue-svg-loader removes the id’s no idea why. 

module.exports = {
    chainWebpack: (config) => {
        const svgRule = config.module.rule('svg');

        svgRule.uses.clear();

        svgRule
            .use('vue-svg-loader')
            .loader('vue-svg-loader')
            .options({
                svgo: {
                    plugins: [
                        {removeDoctype: true},
                        {removeComments: true},
                        {cleanupIDs: false},
                        {collapseGroups: false},
                        {removeEmptyContainers: false}
                    ],
                },
            });
    },
};

Leave a comment