preventing vue's compileTemplate from removing style tag

cypress/integration/spec.js

@@ -36,6 +36,10 @@ describe('Vite SVG Loader', () => {
         expect($svg[0].width.baseVal.value).to.equal(400)
       })
   })
+  it('keeps style tag in components', () => {
+    cy.get('#style-tag svg style')
+      .should('exist')
+  })
 
   it('supports ?url param', () => {
     cy.get('#url').contains(/^\/assets\/test\..+\.svg/)

examples/vue/src/App.vue

@@ -4,6 +4,8 @@ import { defineAsyncComponent } from 'vue'
 import HelloWorld from './components/HelloWorld.vue'
 import Test from './assets/test.svg'
 import TestSkipSvgo from './assets/test.svg?skipsvgo'
+//skipsvgo because svgo with some params will inline styles
+import StyleTagTest from './assets/style.svg?skipsvgo'
 import testUrl from './assets/test.svg?url'
 import testRaw from './assets/test.svg?raw'
 
@@ -28,6 +30,10 @@ const Async = defineAsyncComponent(() => import(`./assets/${name}.svg`))
     <TestSkipSvgo />
   </div>
 
+  <div id="style-tag">
+    <StyleTagTest />
+  </div>
+
   <div id="url">
     {{ testUrl }}
   </div>

index.js

@@ -44,6 +44,9 @@ module.exports = function svgLoader (options = {}) {
         }).data
       }
 
+      // To prevent compileTemplate from removing the style tag
+      svg = svg.replace(/<style/g, '<component is="style"').replace(/<\/style/g, '</component')
+
       const { code } = compileTemplate({
         id: JSON.stringify(id),
         source: svg,