diff --git a/packages/preset-icons/index.js b/packages/preset-icons/index.js
index bdc27266e..dc0c9d7e9 100644
--- 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, "%3E");
-};
-
-// Generate SVG from path
-const svgFromPath = (path, fill) => {
- return ``;
-};
+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
new file mode 100644
index 000000000..a4fb2a27d
--- /dev/null
+++ 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, "%3E");
+};
+
+// Generate SVG from path
+export const generateSvgFromPath = (path, fill) => {
+ const items = [
+ ``
+ ];
+ 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%",
+});