@iconify/tools 4.0.0-dev.1 → 4.0.1

package/lib/optimise/figma.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const svg_data_tags = require('../svg/data/tags.cjs');
+const optimise_unwrap = require('./unwrap.cjs');
 
 function isTinyNumber(value, limit) {
   const num = parseInt(value);
@@ -24,8 +25,8 @@ function checkClipPathNode(clipNode, expectedWidth, expectedHeight) {
     ...childNode.attribs
   };
   delete attribs["fill"];
-  const fill = (childNode.attribs["fill"] ?? "").toLowerCase();
-  if (fill !== "white" && fill !== "#fff" && fill !== "#ffffff") {
+  const fill = childNode.attribs["fill"]?.toLowerCase();
+  if (fill !== "white" && fill !== "#fff" && fill !== "#ffffff" && fill !== void 0) {
     console.warn(
       "Unxepected fill on clip path:",
       childNode.attribs["fill"]
@@ -42,6 +43,24 @@ function checkClipPathNode(clipNode, expectedWidth, expectedHeight) {
       }
       delete attribs["width"];
       delete attribs["height"];
+      for (const attr in childNode.attribs) {
+        const value = childNode.attribs[attr];
+        switch (attr) {
+          case "rx":
+          case "ry":
+          case "x":
+          case "y":
+            if (value === "0") {
+              delete attribs[attr];
+            }
+            break;
+          case "transform":
+            if (value === "") {
+              delete attribs[attr];
+            }
+            break;
+        }
+      }
       break;
     }
     default:
@@ -74,11 +93,28 @@ function checkClipPathNode(clipNode, expectedWidth, expectedHeight) {
 }
 const urlStart = "url(#";
 const urlEnd = ")";
-function removeFigmaClipPathFromSVG(svg) {
-  const cheerio2 = svg.$svg;
+function remove(svg) {
+  optimise_unwrap.unwrapEmptyGroup(svg);
+  let content = svg.toString();
+  const backup = content;
+  const clipPathBlocks = content.match(
+    /<clipPath[^>]*>[\s\S]+?<\/clipPath>/g
+  );
+  if (clipPathBlocks?.length === 2 && clipPathBlocks[0] === clipPathBlocks[1]) {
+    const split = clipPathBlocks[0];
+    const lines = content.split(split);
+    content = lines.shift() + split + lines.join("");
+  }
+  content = content.replaceAll('class="frame-clip-def frame-clip"', "");
+  if (content.includes("<defs>")) {
+    content = content.replace(/<\/?defs>/g, "");
+  }
+  if (content !== backup) {
+    svg.load(content);
+  }
+  const cheerio = svg.$svg;
   const $root = svg.$svg(":root");
   const children = $root.children();
-  const backup = svg.toString();
   const shapesToClip = [];
   let clipID;
   for (let i = 0; i < children.length; i++) {
@@ -112,7 +148,7 @@ function removeFigmaClipPathFromSVG(svg) {
       svg.viewBox.width,
       svg.viewBox.height
     );
-    cheerio2(node).remove();
+    cheerio(node).remove();
     return result;
   };
   const findClipPath = () => {
@@ -120,29 +156,6 @@ function removeFigmaClipPathFromSVG(svg) {
       const node = children[i];
       if (node.type === "tag") {
         const tagName = node.tagName;
-        if (svg_data_tags.defsTag.has(tagName)) {
-          const defsChildren = node.children;
-          for (let j = 0; j < defsChildren.length; j++) {
-            const childNode = defsChildren[j];
-            if (childNode.type === "tag" && childNode.tagName === "clipPath") {
-              const result = checkClipPath(childNode);
-              if (result !== void 0) {
-                const validChildren = node.children.filter(
-                  (test) => {
-                    if (test.type === "text") {
-                      return false;
-                    }
-                    return true;
-                  }
-                );
-                if (!validChildren.length) {
-                  cheerio2(node).remove();
-                }
-                return result;
-              }
-            }
-          }
-        }
         if (tagName === "clipPath") {
           const result = checkClipPath(node);
           if (result !== void 0) {
@@ -154,22 +167,31 @@ function removeFigmaClipPathFromSVG(svg) {
   };
   const clipPath = findClipPath();
   if (!clipPath) {
-    svg.load(backup);
     return false;
   }
   const attribs = clipPath.attribs;
   for (let i = 0; i < shapesToClip.length; i++) {
     const node = shapesToClip[i];
-    cheerio2(node).removeAttr("clip-path");
+    cheerio(node).removeAttr("clip-path");
     for (const attr in attribs) {
       if (node.attribs[attr] !== void 0) {
-        svg.load(backup);
         return false;
       }
-      cheerio2(node).attr(attr, attribs[attr]);
+      cheerio(node).attr(attr, attribs[attr]);
     }
   }
   return true;
 }
+function removeFigmaClipPathFromSVG(svg) {
+  const backup = svg.toString();
+  try {
+    if (remove(svg)) {
+      return true;
+    }
+  } catch {
+  }
+  svg.load(backup);
+  return false;
+}
 
 exports.removeFigmaClipPathFromSVG = removeFigmaClipPathFromSVG;

package/lib/optimise/figma.d.cts

@@ -0,0 +1,13 @@
+import { SVG } from '../svg/index.cjs';
+import 'cheerio';
+import '@iconify/types';
+import '@iconify/utils/lib/customisations/defaults';
+
+/**
+ * Removes clip path from SVG, which Figma and Penpot add to icons that might have overflowing elements
+ *
+ * Function was originally designed for Figma only, but later added support for Penpot
+ */
+declare function removeFigmaClipPathFromSVG(svg: SVG): boolean;
+
+export { removeFigmaClipPathFromSVG };

package/lib/optimise/figma.d.mts

@@ -0,0 +1,13 @@
+import { SVG } from '../svg/index.mjs';
+import 'cheerio';
+import '@iconify/types';
+import '@iconify/utils/lib/customisations/defaults';
+
+/**
+ * Removes clip path from SVG, which Figma and Penpot add to icons that might have overflowing elements
+ *
+ * Function was originally designed for Figma only, but later added support for Penpot
+ */
+declare function removeFigmaClipPathFromSVG(svg: SVG): boolean;
+
+export { removeFigmaClipPathFromSVG };

package/lib/optimise/figma.d.ts

@@ -4,7 +4,9 @@ import '@iconify/types';
 import '@iconify/utils/lib/customisations/defaults';
 
 /**
- * Removes clip path from SVG, which Figma adds to icons that might have overflowing elements
+ * Removes clip path from SVG, which Figma and Penpot add to icons that might have overflowing elements
+ *
+ * Function was originally designed for Figma only, but later added support for Penpot
  */
 declare function removeFigmaClipPathFromSVG(svg: SVG): boolean;
 

package/lib/optimise/figma.mjs

@@ -1,4 +1,5 @@
 import { defsTag, maskTags, symbolTag } from '../svg/data/tags.mjs';
+import { unwrapEmptyGroup } from './unwrap.mjs';
 
 function isTinyNumber(value, limit) {
   const num = parseInt(value);
@@ -22,8 +23,8 @@ function checkClipPathNode(clipNode, expectedWidth, expectedHeight) {
     ...childNode.attribs
   };
   delete attribs["fill"];
-  const fill = (childNode.attribs["fill"] ?? "").toLowerCase();
-  if (fill !== "white" && fill !== "#fff" && fill !== "#ffffff") {
+  const fill = childNode.attribs["fill"]?.toLowerCase();
+  if (fill !== "white" && fill !== "#fff" && fill !== "#ffffff" && fill !== void 0) {
     console.warn(
       "Unxepected fill on clip path:",
       childNode.attribs["fill"]
@@ -40,6 +41,24 @@ function checkClipPathNode(clipNode, expectedWidth, expectedHeight) {
       }
       delete attribs["width"];
       delete attribs["height"];
+      for (const attr in childNode.attribs) {
+        const value = childNode.attribs[attr];
+        switch (attr) {
+          case "rx":
+          case "ry":
+          case "x":
+          case "y":
+            if (value === "0") {
+              delete attribs[attr];
+            }
+            break;
+          case "transform":
+            if (value === "") {
+              delete attribs[attr];
+            }
+            break;
+        }
+      }
       break;
     }
     default:
@@ -72,11 +91,28 @@ function checkClipPathNode(clipNode, expectedWidth, expectedHeight) {
 }
 const urlStart = "url(#";
 const urlEnd = ")";
-function removeFigmaClipPathFromSVG(svg) {
-  const cheerio2 = svg.$svg;
+function remove(svg) {
+  unwrapEmptyGroup(svg);
+  let content = svg.toString();
+  const backup = content;
+  const clipPathBlocks = content.match(
+    /<clipPath[^>]*>[\s\S]+?<\/clipPath>/g
+  );
+  if (clipPathBlocks?.length === 2 && clipPathBlocks[0] === clipPathBlocks[1]) {
+    const split = clipPathBlocks[0];
+    const lines = content.split(split);
+    content = lines.shift() + split + lines.join("");
+  }
+  content = content.replaceAll('class="frame-clip-def frame-clip"', "");
+  if (content.includes("<defs>")) {
+    content = content.replace(/<\/?defs>/g, "");
+  }
+  if (content !== backup) {
+    svg.load(content);
+  }
+  const cheerio = svg.$svg;
   const $root = svg.$svg(":root");
   const children = $root.children();
-  const backup = svg.toString();
   const shapesToClip = [];
   let clipID;
   for (let i = 0; i < children.length; i++) {
@@ -110,7 +146,7 @@ function removeFigmaClipPathFromSVG(svg) {
       svg.viewBox.width,
       svg.viewBox.height
     );
-    cheerio2(node).remove();
+    cheerio(node).remove();
     return result;
   };
   const findClipPath = () => {
@@ -118,29 +154,6 @@ function removeFigmaClipPathFromSVG(svg) {
       const node = children[i];
       if (node.type === "tag") {
         const tagName = node.tagName;
-        if (defsTag.has(tagName)) {
-          const defsChildren = node.children;
-          for (let j = 0; j < defsChildren.length; j++) {
-            const childNode = defsChildren[j];
-            if (childNode.type === "tag" && childNode.tagName === "clipPath") {
-              const result = checkClipPath(childNode);
-              if (result !== void 0) {
-                const validChildren = node.children.filter(
-                  (test) => {
-                    if (test.type === "text") {
-                      return false;
-                    }
-                    return true;
-                  }
-                );
-                if (!validChildren.length) {
-                  cheerio2(node).remove();
-                }
-                return result;
-              }
-            }
-          }
-        }
         if (tagName === "clipPath") {
           const result = checkClipPath(node);
           if (result !== void 0) {
@@ -152,22 +165,31 @@ function removeFigmaClipPathFromSVG(svg) {
   };
   const clipPath = findClipPath();
   if (!clipPath) {
-    svg.load(backup);
     return false;
   }
   const attribs = clipPath.attribs;
   for (let i = 0; i < shapesToClip.length; i++) {
     const node = shapesToClip[i];
-    cheerio2(node).removeAttr("clip-path");
+    cheerio(node).removeAttr("clip-path");
     for (const attr in attribs) {
       if (node.attribs[attr] !== void 0) {
-        svg.load(backup);
         return false;
       }
-      cheerio2(node).attr(attr, attribs[attr]);
+      cheerio(node).attr(attr, attribs[attr]);
     }
   }
   return true;
 }
+function removeFigmaClipPathFromSVG(svg) {
+  const backup = svg.toString();
+  try {
+    if (remove(svg)) {
+      return true;
+    }
+  } catch {
+  }
+  svg.load(backup);
+  return false;
+}
 
 export { removeFigmaClipPathFromSVG };

package/lib/optimise/flags.cjs

@@ -223,7 +223,7 @@ function cleanPath(path) {
             if (index < 1) {
               break;
             }
-            if (item.params[index - 1].indexOf(".") !== -1) {
+            if (item.params[index - 1].includes(".")) {
               break;
             }
           default:
@@ -235,8 +235,8 @@ function cleanPath(path) {
   });
   return output;
 }
-async function deOptimisePaths(svg) {
-  await svg_parse.parseSVG(svg, (item) => {
+function deOptimisePaths(svg) {
+  svg_parse.parseSVG(svg, (item) => {
     if (item.tagName !== "path") {
       return;
     }

package/lib/optimise/flags.d.cts

@@ -0,0 +1,11 @@
+import { SVG } from '../svg/index.cjs';
+import 'cheerio';
+import '@iconify/types';
+import '@iconify/utils/lib/customisations/defaults';
+
+/**
+ * De-optimise paths. Compressed paths are still not supported by some software.
+ */
+declare function deOptimisePaths(svg: SVG): void;
+
+export { deOptimisePaths };

package/lib/optimise/flags.d.mts

@@ -0,0 +1,11 @@
+import { SVG } from '../svg/index.mjs';
+import 'cheerio';
+import '@iconify/types';
+import '@iconify/utils/lib/customisations/defaults';
+
+/**
+ * De-optimise paths. Compressed paths are still not supported by some software.
+ */
+declare function deOptimisePaths(svg: SVG): void;
+
+export { deOptimisePaths };

package/lib/optimise/flags.d.ts

@@ -6,6 +6,6 @@ import '@iconify/utils/lib/customisations/defaults';
 /**
  * De-optimise paths. Compressed paths are still not supported by some software.
  */
-declare function deOptimisePaths(svg: SVG): Promise<void>;
+declare function deOptimisePaths(svg: SVG): void;
 
 export { deOptimisePaths };

package/lib/optimise/flags.mjs

@@ -221,7 +221,7 @@ function cleanPath(path) {
             if (index < 1) {
               break;
             }
-            if (item.params[index - 1].indexOf(".") !== -1) {
+            if (item.params[index - 1].includes(".")) {
               break;
             }
           default:
@@ -233,8 +233,8 @@ function cleanPath(path) {
   });
   return output;
 }
-async function deOptimisePaths(svg) {
-  await parseSVG(svg, (item) => {
+function deOptimisePaths(svg) {
+  parseSVG(svg, (item) => {
     if (item.tagName !== "path") {
       return;
     }

package/lib/optimise/global-style.cjs

@@ -15,11 +15,11 @@ function getClassList(value) {
   return value?.split(/\s+/);
 }
 const tempDataAttrbiute = "data-gstyle-temp";
-async function cleanupGlobalStyle(svg) {
+function cleanupGlobalStyle(svg) {
   const backup = svg.toString();
   let containsTempAttr = false;
   const animatedClasses = /* @__PURE__ */ new Set();
-  await svg_parse.parseSVG(svg, (item) => {
+  svg_parse.parseSVG(svg, (item) => {
     if (!svg_data_tags.animateTags.has(item.tagName)) {
       return;
     }
@@ -41,7 +41,7 @@ async function cleanupGlobalStyle(svg) {
   });
   const removeClasses = /* @__PURE__ */ new Set();
   try {
-    await svg_parseStyle.parseSVGStyle(svg, async (styleItem) => {
+    svg_parseStyle.parseSVGStyle(svg, (styleItem) => {
       const returnValue = styleItem.value;
       if (styleItem.type !== "global") {
         return returnValue;
@@ -93,7 +93,7 @@ async function cleanupGlobalStyle(svg) {
               break;
             case "class": {
               const className = $element.attr("class");
-              if (className && getClassList(className).indexOf(value) !== -1) {
+              if (className && getClassList(className).includes(value)) {
                 return true;
               }
             }
@@ -101,7 +101,7 @@ async function cleanupGlobalStyle(svg) {
         }
         return false;
       };
-      await svg_parse.parseSVG(svg, (svgItem) => {
+      svg_parse.parseSVG(svg, (svgItem) => {
         const tagName = svgItem.tagName;
         const $element = svgItem.$element;
         if (!isMatch(tagName, $element)) {
@@ -130,7 +130,7 @@ async function cleanupGlobalStyle(svg) {
         }
       });
     });
-    await svg_parse.parseSVG(svg, (svgItem) => {
+    svg_parse.parseSVG(svg, (svgItem) => {
       const $element = svgItem.$element;
       const classList = getClassList($element.attr("class"));
       if (!classList) {
@@ -146,7 +146,7 @@ async function cleanupGlobalStyle(svg) {
       }
     });
     if (containsTempAttr) {
-      await svg_parse.parseSVG(svg, (item) => {
+      svg_parse.parseSVG(svg, (item) => {
         item.$element.removeAttr(tempDataAttrbiute);
       });
     }

package/lib/optimise/global-style.d.cts

@@ -0,0 +1,11 @@
+import { SVG } from '../svg/index.cjs';
+import 'cheerio';
+import '@iconify/types';
+import '@iconify/utils/lib/customisations/defaults';
+
+/**
+ * Expand global style
+ */
+declare function cleanupGlobalStyle(svg: SVG): void;
+
+export { cleanupGlobalStyle };

package/lib/optimise/global-style.d.mts

@@ -0,0 +1,11 @@
+import { SVG } from '../svg/index.mjs';
+import 'cheerio';
+import '@iconify/types';
+import '@iconify/utils/lib/customisations/defaults';
+
+/**
+ * Expand global style
+ */
+declare function cleanupGlobalStyle(svg: SVG): void;
+
+export { cleanupGlobalStyle };

package/lib/optimise/global-style.d.ts

@@ -6,6 +6,6 @@ import '@iconify/utils/lib/customisations/defaults';
 /**
  * Expand global style
  */
-declare function cleanupGlobalStyle(svg: SVG): Promise<void>;
+declare function cleanupGlobalStyle(svg: SVG): void;
 
 export { cleanupGlobalStyle };

package/lib/optimise/global-style.mjs

@@ -13,11 +13,11 @@ function getClassList(value) {
   return value?.split(/\s+/);
 }
 const tempDataAttrbiute = "data-gstyle-temp";
-async function cleanupGlobalStyle(svg) {
+function cleanupGlobalStyle(svg) {
   const backup = svg.toString();
   let containsTempAttr = false;
   const animatedClasses = /* @__PURE__ */ new Set();
-  await parseSVG(svg, (item) => {
+  parseSVG(svg, (item) => {
     if (!animateTags.has(item.tagName)) {
       return;
     }
@@ -39,7 +39,7 @@ async function cleanupGlobalStyle(svg) {
   });
   const removeClasses = /* @__PURE__ */ new Set();
   try {
-    await parseSVGStyle(svg, async (styleItem) => {
+    parseSVGStyle(svg, (styleItem) => {
       const returnValue = styleItem.value;
       if (styleItem.type !== "global") {
         return returnValue;
@@ -91,7 +91,7 @@ async function cleanupGlobalStyle(svg) {
               break;
             case "class": {
               const className = $element.attr("class");
-              if (className && getClassList(className).indexOf(value) !== -1) {
+              if (className && getClassList(className).includes(value)) {
                 return true;
               }
             }
@@ -99,7 +99,7 @@ async function cleanupGlobalStyle(svg) {
         }
         return false;
       };
-      await parseSVG(svg, (svgItem) => {
+      parseSVG(svg, (svgItem) => {
         const tagName = svgItem.tagName;
         const $element = svgItem.$element;
         if (!isMatch(tagName, $element)) {
@@ -128,7 +128,7 @@ async function cleanupGlobalStyle(svg) {
         }
       });
     });
-    await parseSVG(svg, (svgItem) => {
+    parseSVG(svg, (svgItem) => {
       const $element = svgItem.$element;
       const classList = getClassList($element.attr("class"));
       if (!classList) {
@@ -144,7 +144,7 @@ async function cleanupGlobalStyle(svg) {
       }
     });
     if (containsTempAttr) {
-      await parseSVG(svg, (item) => {
+      parseSVG(svg, (item) => {
         item.$element.removeAttr(tempDataAttrbiute);
       });
     }

package/lib/optimise/mask.cjs

@@ -46,7 +46,7 @@ function convertSVGToMask(svg, options = {}) {
   let failed = false;
   let hasCustomValue = false;
   const backup = svg.toString();
-  colors_parse.parseColorsSync(svg, {
+  colors_parse.parseColors(svg, {
     callback: (attr, colorStr, color) => {
       if (!color || colors_parse.isEmptyColor(color)) {
         return colorStr;

package/lib/optimise/mask.d.cts

@@ -0,0 +1,24 @@
+import { Color } from '@iconify/utils/lib/colors/types';
+import { SVG } from '../svg/index.cjs';
+import 'cheerio';
+import '@iconify/types';
+import '@iconify/utils/lib/customisations/defaults';
+
+type ColorCallback = (value: string, color: Color | null) => boolean;
+type ColorCheck = string | string[] | ColorCallback;
+interface SVGToMaskOptions {
+    color?: string;
+    solid?: ColorCheck;
+    transparent?: ColorCheck;
+    custom?: (value: string, color: Color | null) => string | number | undefined;
+    force?: boolean;
+    id?: string;
+}
+/**
+ * Converts SVG to mask
+ *
+ * Fixes badly designed icons, which use white shape where icon supposed to be transparent
+ */
+declare function convertSVGToMask(svg: SVG, options?: SVGToMaskOptions): boolean;
+
+export { convertSVGToMask };

package/lib/optimise/mask.d.mts

@@ -0,0 +1,24 @@
+import { Color } from '@iconify/utils/lib/colors/types';
+import { SVG } from '../svg/index.mjs';
+import 'cheerio';
+import '@iconify/types';
+import '@iconify/utils/lib/customisations/defaults';
+
+type ColorCallback = (value: string, color: Color | null) => boolean;
+type ColorCheck = string | string[] | ColorCallback;
+interface SVGToMaskOptions {
+    color?: string;
+    solid?: ColorCheck;
+    transparent?: ColorCheck;
+    custom?: (value: string, color: Color | null) => string | number | undefined;
+    force?: boolean;
+    id?: string;
+}
+/**
+ * Converts SVG to mask
+ *
+ * Fixes badly designed icons, which use white shape where icon supposed to be transparent
+ */
+declare function convertSVGToMask(svg: SVG, options?: SVGToMaskOptions): boolean;
+
+export { convertSVGToMask };

package/lib/optimise/mask.mjs

@@ -1,4 +1,4 @@
-import { parseColorsSync, isEmptyColor } from '../colors/parse.mjs';
+import { parseColors, isEmptyColor } from '../colors/parse.mjs';
 import { parseSVGContent, splitSVGDefs, iconToHTML } from '@iconify/utils';
 import '@iconify/utils/lib/colors';
 import '../svg/data/tags.mjs';
@@ -44,7 +44,7 @@ function convertSVGToMask(svg, options = {}) {
   let failed = false;
   let hasCustomValue = false;
   const backup = svg.toString();
-  parseColorsSync(svg, {
+  parseColors(svg, {
     callback: (attr, colorStr, color) => {
       if (!color || isEmptyColor(color)) {
         return colorStr;

package/lib/optimise/origin.d.cts

@@ -0,0 +1,11 @@
+import { SVG } from '../svg/index.cjs';
+import 'cheerio';
+import '@iconify/types';
+import '@iconify/utils/lib/customisations/defaults';
+
+/**
+ * Reset origin to 0 0
+ */
+declare function resetSVGOrigin(svg: SVG): void;
+
+export { resetSVGOrigin };

package/lib/optimise/origin.d.mts

@@ -0,0 +1,11 @@
+import { SVG } from '../svg/index.mjs';
+import 'cheerio';
+import '@iconify/types';
+import '@iconify/utils/lib/customisations/defaults';
+
+/**
+ * Reset origin to 0 0
+ */
+declare function resetSVGOrigin(svg: SVG): void;
+
+export { resetSVGOrigin };

package/lib/optimise/scale.d.cts

@@ -0,0 +1,11 @@
+import { SVG } from '../svg/index.cjs';
+import 'cheerio';
+import '@iconify/types';
+import '@iconify/utils/lib/customisations/defaults';
+
+/**
+ * Scale icon
+ */
+declare function scaleSVG(svg: SVG, scale: number): void;
+
+export { scaleSVG };