@iconify/tools 4.0.0 → 4.0.2

package/lib/index.cjs

@@ -88,6 +88,7 @@ require('extract-zip');
 require('tar');
 require('./download/gitlab/types.cjs');
 require('./colors/attribs.cjs');
+require('./optimise/unwrap.cjs');
 require('./export/helpers/custom-files.cjs');
 require('child_process');
 

package/lib/index.mjs

@@ -86,5 +86,6 @@ import 'extract-zip';
 import 'tar';
 import './download/gitlab/types.mjs';
 import './colors/attribs.mjs';
+import './optimise/unwrap.mjs';
 import './export/helpers/custom-files.mjs';
 import 'child_process';

package/lib/misc/scan.d.cts

@@ -17,8 +17,8 @@ type ScanDirectoryCallbackFalseResult = boolean | null | undefined;
 type ScanDirectoryCallbackStringResult = ScanDirectoryCallbackFalseResult | string;
 type Callback<T> = (ext: string, file: string, subdir: string, path: string, stat: Stats) => T;
 type AsyncCallback<T> = Callback<T | Promise<T>>;
-type ScanDirectoryCallback = AsyncCallback<ScanDirectoryCallbackStringResult | unknown>;
-type ScanDirectorySyncCallback = Callback<ScanDirectoryCallbackStringResult | unknown>;
+type ScanDirectoryCallback = AsyncCallback<ScanDirectoryCallbackStringResult | undefined>;
+type ScanDirectorySyncCallback = Callback<ScanDirectoryCallbackStringResult | undefined>;
 /**
  * Find all files in directory
  */

package/lib/misc/scan.d.mts

@@ -17,8 +17,8 @@ type ScanDirectoryCallbackFalseResult = boolean | null | undefined;
 type ScanDirectoryCallbackStringResult = ScanDirectoryCallbackFalseResult | string;
 type Callback<T> = (ext: string, file: string, subdir: string, path: string, stat: Stats) => T;
 type AsyncCallback<T> = Callback<T | Promise<T>>;
-type ScanDirectoryCallback = AsyncCallback<ScanDirectoryCallbackStringResult | unknown>;
-type ScanDirectorySyncCallback = Callback<ScanDirectoryCallbackStringResult | unknown>;
+type ScanDirectoryCallback = AsyncCallback<ScanDirectoryCallbackStringResult | undefined>;
+type ScanDirectorySyncCallback = Callback<ScanDirectoryCallbackStringResult | undefined>;
 /**
  * Find all files in directory
  */

package/lib/misc/scan.d.ts

@@ -17,8 +17,8 @@ type ScanDirectoryCallbackFalseResult = boolean | null | undefined;
 type ScanDirectoryCallbackStringResult = ScanDirectoryCallbackFalseResult | string;
 type Callback<T> = (ext: string, file: string, subdir: string, path: string, stat: Stats) => T;
 type AsyncCallback<T> = Callback<T | Promise<T>>;
-type ScanDirectoryCallback = AsyncCallback<ScanDirectoryCallbackStringResult | unknown>;
-type ScanDirectorySyncCallback = Callback<ScanDirectoryCallbackStringResult | unknown>;
+type ScanDirectoryCallback = AsyncCallback<ScanDirectoryCallbackStringResult | undefined>;
+type ScanDirectorySyncCallback = Callback<ScanDirectoryCallbackStringResult | undefined>;
 /**
  * Find all files in directory
  */

package/lib/optimise/figma.cjs

@@ -1,6 +1,16 @@
 'use strict';
 
+const utils = require('@iconify/utils');
+const svg_cleanup_inlineStyle = require('../svg/cleanup/inline-style.cjs');
 const svg_data_tags = require('../svg/data/tags.cjs');
+const svg_parse = require('../svg/parse.cjs');
+const optimise_unwrap = require('./unwrap.cjs');
+require('../css/parse.cjs');
+require('../css/parser/tokens.cjs');
+require('../css/parser/error.cjs');
+require('../css/parser/strings.cjs');
+require('../css/parser/text.cjs');
+require('../svg/data/attributes.cjs');
 
 function isTinyNumber(value, limit) {
   const num = parseInt(value);
@@ -24,8 +34,10 @@ 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"];
+  const colorValue = fill ? utils.stringToColor(fill) : null;
+  const colorString = colorValue ? utils.colorToString(colorValue) : null;
+  if (fill && colorString !== "#fff") {
     console.warn(
       "Unxepected fill on clip path:",
       childNode.attribs["fill"]
@@ -74,11 +86,79 @@ function checkClipPathNode(clipNode, expectedWidth, expectedHeight) {
 }
 const urlStart = "url(#";
 const urlEnd = ")";
-function removeFigmaClipPathFromSVG(svg) {
+function remove(svg) {
+  optimise_unwrap.unwrapEmptyGroup(svg);
+  let content = svg.toString();
+  const backup = content;
+  const isPenpot = content.includes("frame-clip-def");
+  if (isPenpot) {
+    svg_cleanup_inlineStyle.cleanupInlineStyle(svg);
+    svg_parse.parseSVG(svg, (item) => {
+      const tagName = item.tagName;
+      for (const attr in item.element.attribs) {
+        const value = item.element.attribs[attr];
+        switch (attr) {
+          case "id":
+            if (!svg_data_tags.maskTags.has(tagName) && !svg_data_tags.symbolTag.has(tagName)) {
+              item.$element.removeAttr(attr);
+            }
+            break;
+          case "class":
+          case "xmlns:xlink":
+          case "version":
+            item.$element.removeAttr(attr);
+            break;
+          case "transform": {
+            const trimmed = value.replace(/\s+/g, "").replace(/\.0+/g, "");
+            if (!trimmed || trimmed === "matrix(1,0,0,1,0,0)") {
+              item.$element.removeAttr(attr);
+            }
+            break;
+          }
+          case "rx":
+          case "ry":
+          case "x":
+          case "y":
+            if (value === "0") {
+              item.$element.removeAttr(attr);
+            }
+            break;
+          case "fill-opacity":
+          case "stroke-opacity":
+          case "opacity":
+            if (value === "1") {
+              item.$element.removeAttr(attr);
+            }
+            break;
+          case "fill":
+          case "stroke": {
+            const colorValue = utils.stringToColor(value);
+            if (colorValue?.type === "rgb") {
+              item.$element.attr(attr, utils.colorToString(colorValue));
+            }
+          }
+        }
+      }
+    });
+    content = svg.toString();
+  }
+  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("");
+  }
+  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++) {
@@ -102,59 +182,26 @@ function removeFigmaClipPathFromSVG(svg) {
   if (typeof clipID !== "string") {
     return false;
   }
-  const checkClipPath = (node) => {
-    const id = node.attribs["id"];
-    if (id !== clipID) {
-      return;
-    }
-    const result = checkClipPathNode(
-      node,
-      svg.viewBox.width,
-      svg.viewBox.height
-    );
-    cheerio(node).remove();
-    return result;
-  };
   const findClipPath = () => {
     for (let i = 0; i < children.length; i++) {
       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) {
-                  cheerio(node).remove();
-                }
-                return result;
-              }
-            }
-          }
-        }
-        if (tagName === "clipPath") {
-          const result = checkClipPath(node);
-          if (result !== void 0) {
-            return result;
-          }
+      if (node.type === "tag" && node.tagName === "clipPath") {
+        const id = node.attribs["id"];
+        if (id === clipID) {
+          const result = checkClipPathNode(
+            node,
+            svg.viewBox.width,
+            svg.viewBox.height
+          );
+          cheerio(node).remove();
+          return result;
         }
+        return;
       }
     }
   };
   const clipPath = findClipPath();
   if (!clipPath) {
-    svg.load(backup);
     return false;
   }
   const attribs = clipPath.attribs;
@@ -163,7 +210,6 @@ function removeFigmaClipPathFromSVG(svg) {
     cheerio(node).removeAttr("clip-path");
     for (const attr in attribs) {
       if (node.attribs[attr] !== void 0) {
-        svg.load(backup);
         return false;
       }
       cheerio(node).attr(attr, attribs[attr]);
@@ -171,5 +217,16 @@ function removeFigmaClipPathFromSVG(svg) {
   }
   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

@@ -4,7 +4,10 @@ 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.
+ * Also removes mess generated by Penpot
+ *
+ * Function was originally designed for Figma only, but later added support for Penpot
  */
 declare function removeFigmaClipPathFromSVG(svg: SVG): boolean;
 

package/lib/optimise/figma.d.mts

@@ -4,7 +4,10 @@ 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.
+ * Also removes mess generated by Penpot
+ *
+ * Function was originally designed for Figma only, but later added support for Penpot
  */
 declare function removeFigmaClipPathFromSVG(svg: SVG): boolean;
 

package/lib/optimise/figma.d.ts

@@ -4,7 +4,10 @@ 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.
+ * Also removes mess generated by Penpot
+ *
+ * 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,14 @@
-import { defsTag, maskTags, symbolTag } from '../svg/data/tags.mjs';
+import { stringToColor, colorToString } from '@iconify/utils';
+import { cleanupInlineStyle } from '../svg/cleanup/inline-style.mjs';
+import { maskTags, symbolTag, defsTag } from '../svg/data/tags.mjs';
+import { parseSVG } from '../svg/parse.mjs';
+import { unwrapEmptyGroup } from './unwrap.mjs';
+import '../css/parse.mjs';
+import '../css/parser/tokens.mjs';
+import '../css/parser/error.mjs';
+import '../css/parser/strings.mjs';
+import '../css/parser/text.mjs';
+import '../svg/data/attributes.mjs';
 
 function isTinyNumber(value, limit) {
   const num = parseInt(value);
@@ -22,8 +32,10 @@ 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"];
+  const colorValue = fill ? stringToColor(fill) : null;
+  const colorString = colorValue ? colorToString(colorValue) : null;
+  if (fill && colorString !== "#fff") {
     console.warn(
       "Unxepected fill on clip path:",
       childNode.attribs["fill"]
@@ -72,11 +84,79 @@ function checkClipPathNode(clipNode, expectedWidth, expectedHeight) {
 }
 const urlStart = "url(#";
 const urlEnd = ")";
-function removeFigmaClipPathFromSVG(svg) {
+function remove(svg) {
+  unwrapEmptyGroup(svg);
+  let content = svg.toString();
+  const backup = content;
+  const isPenpot = content.includes("frame-clip-def");
+  if (isPenpot) {
+    cleanupInlineStyle(svg);
+    parseSVG(svg, (item) => {
+      const tagName = item.tagName;
+      for (const attr in item.element.attribs) {
+        const value = item.element.attribs[attr];
+        switch (attr) {
+          case "id":
+            if (!maskTags.has(tagName) && !symbolTag.has(tagName)) {
+              item.$element.removeAttr(attr);
+            }
+            break;
+          case "class":
+          case "xmlns:xlink":
+          case "version":
+            item.$element.removeAttr(attr);
+            break;
+          case "transform": {
+            const trimmed = value.replace(/\s+/g, "").replace(/\.0+/g, "");
+            if (!trimmed || trimmed === "matrix(1,0,0,1,0,0)") {
+              item.$element.removeAttr(attr);
+            }
+            break;
+          }
+          case "rx":
+          case "ry":
+          case "x":
+          case "y":
+            if (value === "0") {
+              item.$element.removeAttr(attr);
+            }
+            break;
+          case "fill-opacity":
+          case "stroke-opacity":
+          case "opacity":
+            if (value === "1") {
+              item.$element.removeAttr(attr);
+            }
+            break;
+          case "fill":
+          case "stroke": {
+            const colorValue = stringToColor(value);
+            if (colorValue?.type === "rgb") {
+              item.$element.attr(attr, colorToString(colorValue));
+            }
+          }
+        }
+      }
+    });
+    content = svg.toString();
+  }
+  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("");
+  }
+  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++) {
@@ -100,59 +180,26 @@ function removeFigmaClipPathFromSVG(svg) {
   if (typeof clipID !== "string") {
     return false;
   }
-  const checkClipPath = (node) => {
-    const id = node.attribs["id"];
-    if (id !== clipID) {
-      return;
-    }
-    const result = checkClipPathNode(
-      node,
-      svg.viewBox.width,
-      svg.viewBox.height
-    );
-    cheerio(node).remove();
-    return result;
-  };
   const findClipPath = () => {
     for (let i = 0; i < children.length; i++) {
       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) {
-                  cheerio(node).remove();
-                }
-                return result;
-              }
-            }
-          }
-        }
-        if (tagName === "clipPath") {
-          const result = checkClipPath(node);
-          if (result !== void 0) {
-            return result;
-          }
+      if (node.type === "tag" && node.tagName === "clipPath") {
+        const id = node.attribs["id"];
+        if (id === clipID) {
+          const result = checkClipPathNode(
+            node,
+            svg.viewBox.width,
+            svg.viewBox.height
+          );
+          cheerio(node).remove();
+          return result;
         }
+        return;
       }
     }
   };
   const clipPath = findClipPath();
   if (!clipPath) {
-    svg.load(backup);
     return false;
   }
   const attribs = clipPath.attribs;
@@ -161,7 +208,6 @@ function removeFigmaClipPathFromSVG(svg) {
     cheerio(node).removeAttr("clip-path");
     for (const attr in attribs) {
       if (node.attribs[attr] !== void 0) {
-        svg.load(backup);
         return false;
       }
       cheerio(node).attr(attr, attribs[attr]);
@@ -169,5 +215,16 @@ function removeFigmaClipPathFromSVG(svg) {
   }
   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/unwrap.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+function unwrapEmptyGroup(svg) {
+  const cheerio = svg.$svg;
+  const $root = svg.$svg(":root");
+  const children = $root.children();
+  if (children.length !== 1 || children[0].tagName !== "g") {
+    return;
+  }
+  const groupNode = children[0];
+  const html = cheerio(groupNode).html();
+  if (!html) {
+    return;
+  }
+  for (const attr in groupNode.attribs) {
+    const value = groupNode.attribs[attr];
+    switch (attr) {
+      case "id": {
+        if (html?.includes(value)) {
+          return;
+        }
+        break;
+      }
+      default:
+        return;
+    }
+  }
+  $root.html(html);
+}
+
+exports.unwrapEmptyGroup = unwrapEmptyGroup;

package/lib/optimise/unwrap.d.cts

@@ -0,0 +1,11 @@
+import { SVG } from '../svg/index.cjs';
+import 'cheerio';
+import '@iconify/types';
+import '@iconify/utils/lib/customisations/defaults';
+
+/**
+ * Removes empty group from SVG root element
+ */
+declare function unwrapEmptyGroup(svg: SVG): void;
+
+export { unwrapEmptyGroup };

package/lib/optimise/unwrap.d.mts

@@ -0,0 +1,11 @@
+import { SVG } from '../svg/index.mjs';
+import 'cheerio';
+import '@iconify/types';
+import '@iconify/utils/lib/customisations/defaults';
+
+/**
+ * Removes empty group from SVG root element
+ */
+declare function unwrapEmptyGroup(svg: SVG): void;
+
+export { unwrapEmptyGroup };

package/lib/optimise/unwrap.d.ts

@@ -0,0 +1,11 @@
+import { SVG } from '../svg/index.js';
+import 'cheerio';
+import '@iconify/types';
+import '@iconify/utils/lib/customisations/defaults';
+
+/**
+ * Removes empty group from SVG root element
+ */
+declare function unwrapEmptyGroup(svg: SVG): void;
+
+export { unwrapEmptyGroup };

package/lib/optimise/unwrap.mjs

@@ -0,0 +1,29 @@
+function unwrapEmptyGroup(svg) {
+  const cheerio = svg.$svg;
+  const $root = svg.$svg(":root");
+  const children = $root.children();
+  if (children.length !== 1 || children[0].tagName !== "g") {
+    return;
+  }
+  const groupNode = children[0];
+  const html = cheerio(groupNode).html();
+  if (!html) {
+    return;
+  }
+  for (const attr in groupNode.attribs) {
+    const value = groupNode.attribs[attr];
+    switch (attr) {
+      case "id": {
+        if (html?.includes(value)) {
+          return;
+        }
+        break;
+      }
+      default:
+        return;
+    }
+  }
+  $root.html(html);
+}
+
+export { unwrapEmptyGroup };

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "Collection of functions for cleaning up and parsing SVG for Iconify project",
   "author": "Vjacheslav Trushkin",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "license": "MIT",
   "bugs": "https://github.com/iconify/tools/issues",
   "homepage": "https://github.com/iconify/tools",
@@ -16,29 +16,29 @@
   "types": "./lib/index.d.ts",
   "dependencies": {
     "@iconify/types": "^2.0.0",
-    "@iconify/utils": "^2.1.14",
-    "@types/tar": "^6.1.10",
-    "axios": "^1.6.3",
+    "@iconify/utils": "^2.1.22",
+    "@types/tar": "^6.1.11",
+    "axios": "^1.6.7",
     "cheerio": "1.0.0-rc.12",
     "extract-zip": "^2.0.1",
     "local-pkg": "^0.5.0",
-    "pathe": "^1.1.1",
-    "svgo": "^3.1.0",
+    "pathe": "^1.1.2",
+    "svgo": "^3.2.0",
     "tar": "^6.2.0"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.5",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.17",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-prettier": "^5.1.3",
     "jest": "^29.7.0",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.1.2",
     "typescript": "^5.3.3",
     "unbuild": "^2.0.0"
   },
@@ -454,6 +454,11 @@
       "require": "./lib/optimise/svgo.cjs",
       "import": "./lib/optimise/svgo.mjs"
     },
+    "./lib/optimise/unwrap": {
+      "types": "./lib/optimise/unwrap.d.ts",
+      "require": "./lib/optimise/unwrap.cjs",
+      "import": "./lib/optimise/unwrap.mjs"
+    },
     "./lib/svg/analyse": {
       "types": "./lib/svg/analyse.d.ts",
       "require": "./lib/svg/analyse.cjs",