diff --git a/cypress/integration/spec.js b/cypress/integration/spec.js
index 18074fe..bc4b08e 100644
--- a/cypress/integration/spec.js
+++ b/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/)
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
index 99e7acd..4ff1966 100644
--- a/examples/vue/src/App.vue
+++ b/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>
diff --git a/examples/vue/src/assets/style.svg b/examples/vue/src/assets/style.svg
new file mode 100644
index 0000000..9a39e9b
--- /dev/null
+++ b/examples/vue/src/assets/style.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" width="467" height="462">
+    <style>
+      .rectangle{
+        fill: royalblue
+      }
+      .rectangle + *{
+        fill: crimson
+      }
+    </style>
+    <rect class="rectangle" x="80" y="60" width="250" height="250" rx="20" style="stroke-width:2px;" />
+
+    <rect x="140" y="120" width="250" height="250" rx="40" style="stroke-width:2px;fill-opacity:0.7;" />
+</svg>
\ No newline at end of file
diff --git a/index.js b/index.js
index 87cc6c9..3f1fd34 100644
--- a/index.js
+++ b/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,