feat: allow to customize icon size in generateSvgFromPath util

jmjuanes · Jun 9, 2022 · 69a421b · 69a421b
1 parent c0480bc
commit 69a421b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 19 deletions.
diff --git a/packages/preset-icons/index.js b/packages/preset-icons/index.js
@@ -1,22 +1,9 @@
 import iconsList from "./icons.js";
-import {generateIconCssFromPath} from "./utils.js";
+import {generateIconCssFromPath, getIconsBaseStyles} from "./utils.js";
 
 export default {
     styles: {
-        '[class^="icon-"],[class*=" icon-"]': {
-            alignSelf: "center",
-            display: "inline-flex",
-            lineHeight: "1",
-            textRendering: "auto",
-            verticalAlign: "-0.125em",
-        },
-        '[class^="icon-"]:before,[class*=" icon-"]:before': {
-            content: "''",
-            display: "inline-block",
-            width: "1em",
-            height: "1em",
-            backgroundColor: "currentColor",
-        },
+        ...getIconsBaseStyles(),
         ...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
@@ -14,20 +14,38 @@ const encodeSvg = str => {
 };
 
 // Generate SVG from path
-export const generateSvgFromPath = (path, fill) => {
+export const generateSvgFromPath = (path, size, fill) => {
 	const items = [
-		`<svg xmlns="${namespace}" viewBox="0 0 50 50" width="1em" height="1em">`,
+		`<svg xmlns="${namespace}" viewBox="0 0 ${size || "50"} ${size || "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`,
+export const generateIconCssFromPath = (path, size, fill) => ({
+	"--sii-icon": `url("data:image/svg+xml;utf8,${generateSvgFromPath(path, size, fill)}") no-repeat`,
      mask: "var(--sii-icon) no-repeat",
      maskSize: "100% 100%",
      "-webkit-mask": "var(--sii-icon) no-repeat",
      "-webkit-mask-size": "100% 100%",
 });
+
+// Get icons base styles
+export const getIconsBaseStyles = () => ({
+	'[class^="icon-"],[class*=" icon-"]': {
+		alignSelf: "center",
+		display: "inline-flex",
+		lineHeight: "1",
+		textRendering: "auto",
+		verticalAlign: "-0.125em",
+	},
+	'[class^="icon-"]:before,[class*=" icon-"]:before': {
+		content: "''",
+		display: "inline-block",
+		width: "1em",
+		height: "1em",
+		backgroundColor: "currentColor",
+	},
+});