Some svg files aren't render correctly

[Peppe87]

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

[mohong]

I have the same question.

[Niedzwiedzw]

same problem

[Soviut]

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
        ],

[Peppe87]

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.

[rlsz]

disable SVGO working for me

[Eboubaker]

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