Vue-svg-loader: Some svg files aren't render correctly

Created on 6 Aug 2020  路  4Comments  路  Source: visualfanatic/vue-svg-loader

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

Most helpful comment

I have the same question.

All 4 comments

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

AtofStryker picture AtofStryker  路  3Comments

AasmundEndresen picture AasmundEndresen  路  5Comments

psulkava picture psulkava  路  3Comments

dsbert picture dsbert  路  6Comments

MattCCC picture MattCCC  路  6Comments