@iconify/tools 4.0.1 → 4.0.2

package/lib/optimise/figma.cjs

@@ -1,7 +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);
@@ -25,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" && fill !== void 0) {
+  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"]
@@ -43,24 +54,6 @@ 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:
@@ -97,6 +90,58 @@ 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
   );
@@ -105,7 +150,6 @@ function remove(svg) {
     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, "");
   }
@@ -138,30 +182,21 @@ function remove(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 (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;
       }
     }
   };

package/lib/optimise/figma.d.cts

@@ -4,7 +4,8 @@ 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
+ * 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
  */

package/lib/optimise/figma.d.mts

@@ -4,7 +4,8 @@ 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
+ * 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
  */

package/lib/optimise/figma.d.ts

@@ -4,7 +4,8 @@ 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
+ * 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
  */

package/lib/optimise/figma.mjs

@@ -1,5 +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);
@@ -23,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" && fill !== void 0) {
+  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"]
@@ -41,24 +52,6 @@ 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:
@@ -95,6 +88,58 @@ 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
   );
@@ -103,7 +148,6 @@ function remove(svg) {
     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, "");
   }
@@ -136,30 +180,21 @@ function remove(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 (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;
       }
     }
   };

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.1",
+  "version": "4.0.2",
   "license": "MIT",
   "bugs": "https://github.com/iconify/tools/issues",
   "homepage": "https://github.com/iconify/tools",