SVG <style> definitions removed when loaded as component

Hi, When I include style definitions in a <style> tag, the tag including the styles are being removed when loaded as inline svg using the svg loader. Is this an intended behaviour? I would like to include style definitions and deliver them with the svg within the <svg> tag. Is there a way to preserve the style definitions within the svg?

Sample markup:

logo.svg file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 234.86 58.25">
  <style>
    .dash-grey { fill: #706f6f; }
    .dash-rose { fill: #ea719a; }
    .dash-teal { fill: #1c9fb2; }
    .dash-teal-light { fill: #7ecbd8; }
    .dash-yellow { fill: #f7bc03; }
  </style>
  <g class="icon">
      [...]
   </g>
</svg>

What is rendered:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.86 58.25" class="logo" height="20" data-v-81440b78=""><g class="icon">[...]</g></svg>

Desired rendering:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.86 58.25" class="logo" height="20" data-v-81440b78=""><style> 
  .dash-grey { fill: #706f6f; } 
  .dash-rose { fill: #ea719a; } 
  .dash-teal { fill: #1c9fb2; } 
  .dash-teal-light { fill: #7ecbd8; } 
  .dash-yellow { fill: #f7bc03; }
  </style><g class="icon">[...]</g></svg>

The loaded SVG should include the style defintions from the SVG file.

Thanks for your help.

[DrJume]

By default, SVGO does not strip classes which are used more than once, as it increases the output size. But it’s needed to be able to apply the styles, because Vue strips the style tag away. Thats why I needed to set the onlyMatchedOnce option to false.

svgLoader({
    svgo: true,
    svgoConfig: {
        plugins: [
        {
            name: 'preset-default',
            params: {
                overrides: {
                    inlineStyles: {
                        onlyMatchedOnce: false,
                    },
                },
            },
        },
        ],
    },
})

Maybe it would be worth to include this snippet in the project README.md?

[f3yisayo]

Also had an issue similar to this where the viewbox attribute gets stripped off from some svgs. Fixed it with the properties below:

...

overrides: {
  removeViewBox: false,
},

...