Hi,
I can't understand why some icons aren't rendered correctly while using vue-svg-loader, while others work fine.
What's more, those icons badly rendered by svg-loader are correctly rendered if pasted directly in the vue.js template
e.g.
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play-circle">
<circle cx="12" cy="12" r="10"></circle>
<polygon points="10 8 16 12 10 16 10 8"></polygon>
</svg>
</template>
Some other icons which don't work for me are:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-stop-circle"><circle cx="12" cy="12" r="10"></circle><rect x="9" y="9" width="6" height="6"></rect></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-stop-circle"><circle cx="12" cy="12" r="10"></circle><rect x="9" y="9" width="6" height="6"></rect></svg>
While e.g.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
is rendered the same by vue-svg-loader and pasting it in the template
I have the same question.
same problem
The issue is caused by SVGO aggressively optimizing your files.
To disable SVGO add the following option to the vue-svg-loader in your webpack config.
use: [
{
loader: 'vue-svg-loader',
options: {
svgo: false,
},
},
// ...other loaders
],
Thank you for the answer.
Unfortunately I don't work anymore on the project which had this problem so I can't quickly it works.
I hope someone who had same problem can check\confirm that.
Most helpful comment
I have the same question.