From 7644189d09802456c494cc661ee1921dcccd5248 Mon Sep 17 00:00:00 2001
From: ktsn <ktsn@hey.com>
Date: Wed, 24 Nov 2021 12:38:59 +0800
Subject: [PATCH] Extract `<style>` elements as scoped css

---
 index.js | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 6fb3594..5625505 100644
--- a/index.js
+++ b/index.js
@@ -17,5 +17,34 @@ module.exports = function vueSvgLoader(svg) {
     svg = svg.replace('<svg', '<svg v-on="$listeners"');
   }
 
-  return `<template>${svg}</template>`;
+  const extracted = extractStyle(svg);
+  svg = extracted.svg;
+  const styles = extracted.styles;
+
+  return `<template>${svg}</template><style scoped>${styles.join('\n')}</style>`;
 };
+
+/**
+ * Extract all <style> content from SVG content.
+ * It also returns svg content from which all <style> elements are removed.
+ */
+function extractStyle(svg) {
+  const styleRE = /<style[^>]*>([\s\S]*?)<\/style>/ig;
+  let styles = [];
+  let match;
+
+  while (match = styleRE.exec(svg)) {
+    const style = match[1];
+    styles.push(style);
+
+    const from = match.index;
+    const to = from + match[0].length;
+    svg = svg.slice(0, from) + svg.slice(to);
+    styleRE.lastIndex -= match[0].length;
+  }
+
+  return {
+    svg,
+    styles
+  };
+}