refactor: move some icon utils to an external file

jmjuanes · Jun 1, 2022 · e41bc3a · e41bc3a
1 parent cbec397
commit e41bc3a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 37 deletions.
diff --git a/packages/preset-icons/index.js b/packages/preset-icons/index.js
@@ -1,32 +1,9 @@
 import iconsList from "./icons.js";
-
-// Encode SVG Image
-// Based on https://bl.ocks.org/jennyknuth/222825e315d45a738ed9d6e04c7a88d0
-const encodeSvg = svg => {
-	return svg
-		.replace(/"/g, "'")
-		.replace(/%/g, "%25")
-		.replace(/#/g, "%23")
-		.replace(/{/g, "%7B")
-		.replace(/}/g, "%7D")
-		.replace(/</g, "%3C")
-		.replace(/>/g, "%3E");
-};
-
-// Generate SVG from path
-const svgFromPath = (path, fill) => {
-    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="1em" height="1em"><path fill="${fill}" d="${path}"/></svg>`;
-};
+import {generateIconCssFromPath} from "./utils.js";
 
 export default {
     styles: {
         '[class^="icon-"],[class*=" icon-"]': {
-            // backgroundColor: "currentColor",
-            // display: "inline-block",
-            // height: "1em",
-            // verticalAlign: "text-bottom",
-            // width: "1em",
-            // test
             alignSelf: "center",
             display: "inline-flex",
             lineHeight: "1",
@@ -40,18 +17,9 @@ export default {
             height: "1em",
             backgroundColor: "currentColor",
         },
-        ...Object.fromEntries(iconsList.map(icon => {
-            const selector = `.icon-${icon.name}:before`;
-            const svg = svgFromPath(icon.path, "currentColor");
-            const url = `url("data:image/svg+xml;utf8,${encodeSvg(svg)}") no-repeat`;
-            const styles = {
-                "--siimple-icon": url,
-                mask: "var(--siimple-icon) no-repeat",
-                maskSize: "100% 100%",
-                "-webkit-mask": "var(--siimple-icon) no-repeat",
-                "-webkit-mask-size": "100% 100%",
-            };
-            return [selector, styles];
-        })),
+        ...Object.fromEntries(iconsList.map(icon => ([
+            `.icon-${icon.name}:before`,
+            generateIconCssFromPath(icon.path),
+        ]))),
     },
 };
diff --git a/packages/preset-icons/utils.js b/packages/preset-icons/utils.js
@@ -0,0 +1,33 @@
+const namespace = "http://www.w3.org/2000/svg";
+
+// Encode SVG for using in CSS
+// Based on https://bl.ocks.org/jennyknuth/222825e315d45a738ed9d6e04c7a88d0
+const encodeSvg = str => {
+	return str
+		.replace(/"/g, "'")
+		.replace(/%/g, "%25")
+		.replace(/#/g, "%23")
+		.replace(/{/g, "%7B")
+		.replace(/}/g, "%7D")
+		.replace(/</g, "%3C")
+		.replace(/>/g, "%3E");
+};
+
+// Generate SVG from path
+export const generateSvgFromPath = (path, fill) => {
+	const items = [
+		`<svg xmlns="${namespace}" viewBox="0 0 50 50" width="1em" height="1em">`,
+		`<path fill="${fill || "currentColor"}" d="${path}"/>`,
+		`</svg>`
+	];
+    return encodeSvg(items.join(""));
+};
+
+// Generate icon styles
+export const generateIconCssFromPath = path => ({
+	"--sii-icon": `url("data:image/svg+xml;utf8,${generateSvgFromPath(path)}") no-repeat`,
+     mask: "var(--sii-icon) no-repeat",
+     maskSize: "100% 100%",
+     "-webkit-mask": "var(--sii-icon) no-repeat",
+     "-webkit-mask-size": "100% 100%",
+});