jpkleemans / vite-svg-loader

Vite plugin to load SVG files as Vue components
MIT License
555 stars 59 forks source link

SVG <style> definitions removed when loaded as component #56

Closed distor-sil3nt closed 1 year ago

distor-sil3nt commented 2 years ago

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.

jpkleemans commented 2 years ago

Hi, Vue doesn't support