@iconify/tools 4.0.0 → 4.0.1

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,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) {
+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++) {
@@ -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) {
-                  cheerio(node).remove();
-                }
-                return result;
-              }
-            }
-          }
-        }
         if (tagName === "clipPath") {
           const result = checkClipPath(node);
           if (result !== void 0) {
@@ -154,7 +167,6 @@ function removeFigmaClipPathFromSVG(svg) {
   };
   const clipPath = findClipPath();
   if (!clipPath) {
-    svg.load(backup);
     return false;
   }
   const attribs = clipPath.attribs;
@@ -163,7 +175,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 +182,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,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.d.mts

@@ -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.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) {
+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++) {
@@ -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) {
-                  cheerio(node).remove();
-                }
-                return result;
-              }
-            }
-          }
-        }
         if (tagName === "clipPath") {
           const result = checkClipPath(node);
           if (result !== void 0) {
@@ -152,7 +165,6 @@ function removeFigmaClipPathFromSVG(svg) {
   };
   const clipPath = findClipPath();
   if (!clipPath) {
-    svg.load(backup);
     return false;
   }
   const attribs = clipPath.attribs;
@@ -161,7 +173,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 +180,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.1",
   "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",