Open Peppe87 opened 4 years ago
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.
disable SVGO working for me
Don't completely disable SVGO instead just disable the removeViewBox
option:
module.exports = {
chainWebpack: (config) => {
const svgRule = config.module.rule("svg");
svgRule.uses.clear();
svgRule
.use("babel-loader")
.loader("babel-loader")
.end()
.use("vue-svg-loader")
.loader("vue-svg-loader")
.options({
svgo: {
plugins: [
{removeViewBox: false}, // <-------- HERE
],
},
});
},
// ....
}
Other plugins you can configure: https://svgo.dev/docs/preset-default/ SVGO github: https://github.com/svg/svgo
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.
Some other icons which don't work for me are:
While e.g.
is rendered the same by vue-svg-loader and pasting it in the template