@iconify/tools 2.2.0 → 2.2.2

package/lib/optimise/global-style.cjs

@@ -39,6 +39,7 @@ async function cleanupGlobalStyle(svg) {
       });
     });
   });
+  const removeClasses = /* @__PURE__ */ new Set();
   try {
     await svg_parseStyle.parseSVGStyle(svg, async (styleItem) => {
       const returnValue = styleItem.value;
@@ -123,28 +124,26 @@ async function cleanupGlobalStyle(svg) {
         );
         containsTempAttr = true;
       });
-      const classMatches = matches.filter((item) => item.type === "class").map((item) => item.value);
-      if (classMatches.length && styleItem.nextTokens[0]?.type === "close") {
-        await svg_parse.parseSVG(svg, (svgItem) => {
-          const $element = svgItem.$element;
-          if (!isMatch("", $element)) {
-            return;
-          }
-          const classList = getClassList($element.attr("class"));
-          if (!classList) {
-            return;
-          }
-          const filtered = classList.filter(
-            (item) => classMatches.indexOf(item) === -1
-          );
-          if (!filtered.length) {
-            $element.removeAttr("class");
-          } else {
-            $element.attr("class", filtered.join(" "));
-          }
-        });
+      matches.forEach((match) => {
+        if (match.type === "class") {
+          removeClasses.add(match.value);
+        }
+      });
+    });
+    await svg_parse.parseSVG(svg, (svgItem) => {
+      const $element = svgItem.$element;
+      const classList = getClassList($element.attr("class"));
+      if (!classList) {
+        return;
+      }
+      const filtered = classList.filter(
+        (item) => !removeClasses.has(item)
+      );
+      if (!filtered.length) {
+        $element.removeAttr("class");
+      } else {
+        $element.attr("class", filtered.join(" "));
       }
-      return;
     });
     if (containsTempAttr) {
       await svg_parse.parseSVG(svg, (item) => {

package/lib/optimise/global-style.mjs

@@ -37,6 +37,7 @@ async function cleanupGlobalStyle(svg) {
       });
     });
   });
+  const removeClasses = /* @__PURE__ */ new Set();
   try {
     await parseSVGStyle(svg, async (styleItem) => {
       const returnValue = styleItem.value;
@@ -121,28 +122,26 @@ async function cleanupGlobalStyle(svg) {
         );
         containsTempAttr = true;
       });
-      const classMatches = matches.filter((item) => item.type === "class").map((item) => item.value);
-      if (classMatches.length && styleItem.nextTokens[0]?.type === "close") {
-        await parseSVG(svg, (svgItem) => {
-          const $element = svgItem.$element;
-          if (!isMatch("", $element)) {
-            return;
-          }
-          const classList = getClassList($element.attr("class"));
-          if (!classList) {
-            return;
-          }
-          const filtered = classList.filter(
-            (item) => classMatches.indexOf(item) === -1
-          );
-          if (!filtered.length) {
-            $element.removeAttr("class");
-          } else {
-            $element.attr("class", filtered.join(" "));
-          }
-        });
+      matches.forEach((match) => {
+        if (match.type === "class") {
+          removeClasses.add(match.value);
+        }
+      });
+    });
+    await parseSVG(svg, (svgItem) => {
+      const $element = svgItem.$element;
+      const classList = getClassList($element.attr("class"));
+      if (!classList) {
+        return;
+      }
+      const filtered = classList.filter(
+        (item) => !removeClasses.has(item)
+      );
+      if (!filtered.length) {
+        $element.removeAttr("class");
+      } else {
+        $element.attr("class", filtered.join(" "));
       }
-      return;
     });
     if (containsTempAttr) {
       await parseSVG(svg, (item) => {

package/lib/optimise/svgo.cjs

@@ -26,7 +26,9 @@ function getSVGOPlugins(options) {
     "collapseGroups",
     "sortDefsChildren",
     "sortAttrs",
+    // Plugins that are bugged when using animations
     ...options.animated ? [] : ["removeUselessStrokeAndFill"],
+    // Plugins that modify shapes or are bugged when using animations
     ...options.animated || options.keepShapes ? [] : [
       "removeHiddenElems",
       "convertShapeToPath",
@@ -43,9 +45,12 @@ function getSVGOPlugins(options) {
           noSpaceAfterFlags: true
         }
       },
+      // 'removeOffCanvasPaths', // bugged for some icons
       "reusePaths"
     ],
-    ...options.cleanupIDs !== false ? ["cleanupIds"] : []
+    // Clean up IDs, first run
+    // Sometimes bugs out on animated icons. Do not use with animations!
+    ...!options.animated && options.cleanupIDs !== false ? ["cleanupIds"] : []
   ];
 }
 function runSVGO(svg, options = {}) {

package/lib/optimise/svgo.mjs

@@ -24,7 +24,9 @@ function getSVGOPlugins(options) {
     "collapseGroups",
     "sortDefsChildren",
     "sortAttrs",
+    // Plugins that are bugged when using animations
     ...options.animated ? [] : ["removeUselessStrokeAndFill"],
+    // Plugins that modify shapes or are bugged when using animations
     ...options.animated || options.keepShapes ? [] : [
       "removeHiddenElems",
       "convertShapeToPath",
@@ -41,9 +43,12 @@ function getSVGOPlugins(options) {
           noSpaceAfterFlags: true
         }
       },
+      // 'removeOffCanvasPaths', // bugged for some icons
       "reusePaths"
     ],
-    ...options.cleanupIDs !== false ? ["cleanupIds"] : []
+    // Clean up IDs, first run
+    // Sometimes bugs out on animated icons. Do not use with animations!
+    ...!options.animated && options.cleanupIDs !== false ? ["cleanupIds"] : []
   ];
 }
 function runSVGO(svg, options = {}) {

package/lib/svg/cleanup/root-style.cjs

@@ -12,7 +12,11 @@ require('../parse.cjs');
 
 function cleanupRootStyle(svg) {
   return svg_parseStyle.parseSVGStyle(svg, (item) => {
-    if (item.type === "global" && item.selectorTokens.find((token) => token.type === "at-rule")) {
+    if (
+      // If global style
+      item.type === "global" && // If selector tokens contain at-rule
+      item.selectorTokens.find((token) => token.type === "at-rule")
+    ) {
       return;
     }
     return item.value;

package/lib/svg/cleanup/root-style.mjs

@@ -10,7 +10,11 @@ import '../parse.mjs';
 
 function cleanupRootStyle(svg) {
   return parseSVGStyle(svg, (item) => {
-    if (item.type === "global" && item.selectorTokens.find((token) => token.type === "at-rule")) {
+    if (
+      // If global style
+      item.type === "global" && // If selector tokens contain at-rule
+      item.selectorTokens.find((token) => token.type === "at-rule")
+    ) {
       return;
     }
     return item.value;

package/lib/svg/cleanup/root-svg.cjs

@@ -48,7 +48,12 @@ function cleanupSVGRoot(svg) {
       }
       throw new Error(`Unexpected attribute "${attr}" on <${tagName}>`);
     }
-    if (attr.slice(0, 2) === "on" || attr.slice(0, 5) === "aria-" || attr.slice(0, 6) === "xmlns:") {
+    if (
+      // Events
+      attr.slice(0, 2) === "on" || // aria-stuff
+      attr.slice(0, 5) === "aria-" || // Junk
+      attr.slice(0, 6) === "xmlns:"
+    ) {
       $root.removeAttr(attr);
       return;
     }

package/lib/svg/cleanup/root-svg.mjs

@@ -46,7 +46,12 @@ function cleanupSVGRoot(svg) {
       }
       throw new Error(`Unexpected attribute "${attr}" on <${tagName}>`);
     }
-    if (attr.slice(0, 2) === "on" || attr.slice(0, 5) === "aria-" || attr.slice(0, 6) === "xmlns:") {
+    if (
+      // Events
+      attr.slice(0, 2) === "on" || // aria-stuff
+      attr.slice(0, 5) === "aria-" || // Junk
+      attr.slice(0, 6) === "xmlns:"
+    ) {
       $root.removeAttr(attr);
       return;
     }

package/lib/svg/cleanup/svgo-style.cjs

@@ -19,7 +19,10 @@ async function convertStyleToAttrs(svg) {
   let hasStyle = false;
   await svg_parseStyle.parseSVGStyle(svg, (item) => {
     const prop = item.prop;
-    if (svg_data_attributes.badAttributes.has(prop) || svg_data_attributes.badSoftwareAttributes.has(prop) || svg_data_attributes.badAttributePrefixes.has(prop.split("-").shift())) {
+    if (
+      // Attributes / properties now allowed
+      svg_data_attributes.badAttributes.has(prop) || svg_data_attributes.badSoftwareAttributes.has(prop) || svg_data_attributes.badAttributePrefixes.has(prop.split("-").shift())
+    ) {
       return void 0;
     }
     hasStyle = true;

package/lib/svg/cleanup/svgo-style.mjs

@@ -17,7 +17,10 @@ async function convertStyleToAttrs(svg) {
   let hasStyle = false;
   await parseSVGStyle(svg, (item) => {
     const prop = item.prop;
-    if (badAttributes.has(prop) || badSoftwareAttributes.has(prop) || badAttributePrefixes.has(prop.split("-").shift())) {
+    if (
+      // Attributes / properties now allowed
+      badAttributes.has(prop) || badSoftwareAttributes.has(prop) || badAttributePrefixes.has(prop.split("-").shift())
+    ) {
       return void 0;
     }
     hasStyle = true;

package/lib/svg/data/attributes.cjs

@@ -29,6 +29,7 @@ const badSoftwareAttributes = /* @__PURE__ */ new Set([
   "overflow",
   "marker",
   "white-space",
+  // Font stuff
   "direction"
 ]);
 const badAttributePrefixes = /* @__PURE__ */ new Set([
@@ -37,6 +38,7 @@ const badAttributePrefixes = /* @__PURE__ */ new Set([
   "block",
   "data",
   "aria",
+  // Font stuff
   "text",
   "font",
   "letter",
@@ -44,6 +46,7 @@ const badAttributePrefixes = /* @__PURE__ */ new Set([
   "word",
   "line",
   "writing",
+  // Prefix for browser specific stuff
   ""
 ]);
 const commonAttributes = /* @__PURE__ */ new Set(["id"]);
@@ -155,12 +158,15 @@ const tagSpecificAnimatedAttributes = {
   rect: /* @__PURE__ */ new Set(["x", "y", "width", "height", "rx", "ry"])
 };
 const tagSpecificPresentationalAttributes = {
+  // SVG
   svg: /* @__PURE__ */ new Set(["width", "height", ...presentationalAttributes]),
+  // Defnitions, containers and masks
   clipPath: /* @__PURE__ */ new Set([...presentationalAttributes]),
   defs: /* @__PURE__ */ new Set([]),
   g: /* @__PURE__ */ new Set([...presentationalAttributes]),
   mask: /* @__PURE__ */ new Set(["x", "y", "width", "height", ...presentationalAttributes]),
   symbol: /* @__PURE__ */ new Set(["x", "y", "width", "height", ...presentationalAttributes]),
+  // Use
   use: /* @__PURE__ */ new Set([
     "x",
     "y",
@@ -170,7 +176,9 @@ const tagSpecificPresentationalAttributes = {
     "refY",
     ...presentationalAttributes
   ]),
+  // Marker
   marker: /* @__PURE__ */ new Set([...presentationalAttributes]),
+  // Gradients
   linearGradient: /* @__PURE__ */ new Set([
     "x1",
     "x2",
@@ -188,6 +196,7 @@ const tagSpecificPresentationalAttributes = {
     ...presentationalAttributes
   ]),
   stop: /* @__PURE__ */ new Set(["offset", "stop-color", "stop-opacity"]),
+  // Filters
   feFlood: /* @__PURE__ */ new Set(["flood-color", "flood-opacity"]),
   feDropShadow: /* @__PURE__ */ new Set(["flood-color", "flood-opacity"])
 };
@@ -205,10 +214,13 @@ svg_data_tags.filterChildTags.forEach((tag) => {
   ]);
 });
 const tagSpecificNonPresentationalAttributes = {
+  // SVG
   svg: /* @__PURE__ */ new Set(["xmlns", "viewBox", "preserveAspectRatio"]),
+  // Defnitions, containers and masks
   clipPath: /* @__PURE__ */ new Set(["clipPathUnits"]),
   mask: /* @__PURE__ */ new Set(["maskContentUnits", "maskUnits"]),
   symbol: /* @__PURE__ */ new Set(["viewBox", "preserveAspectRatio"]),
+  // Shapes
   circle: /* @__PURE__ */ new Set([...otherShapeAttributes]),
   ellipse: /* @__PURE__ */ new Set([...otherShapeAttributes]),
   line: /* @__PURE__ */ new Set([...otherShapeAttributes]),
@@ -216,7 +228,9 @@ const tagSpecificNonPresentationalAttributes = {
   polygon: /* @__PURE__ */ new Set([...otherShapeAttributes]),
   polyline: /* @__PURE__ */ new Set([...otherShapeAttributes]),
   rect: /* @__PURE__ */ new Set([...otherShapeAttributes]),
+  // Use
   use: /* @__PURE__ */ new Set(["href"]),
+  // Marker
   marker: /* @__PURE__ */ new Set([
     "markerHeight",
     "markerUnits",
@@ -227,6 +241,7 @@ const tagSpecificNonPresentationalAttributes = {
     "refY",
     "viewBox"
   ]),
+  // Animations
   animate: /* @__PURE__ */ new Set([
     ...animationTimingAttributes,
     ...animationValueAttributes,
@@ -256,8 +271,10 @@ const tagSpecificNonPresentationalAttributes = {
     ...otherAnimationAttributes
   ]),
   mpath: /* @__PURE__ */ new Set(["href"]),
+  // Gradients
   linearGradient: /* @__PURE__ */ new Set([...commonGradientAttributes]),
   radialGradient: /* @__PURE__ */ new Set([...commonGradientAttributes]),
+  // Filters
   feSpotLight: /* @__PURE__ */ new Set([
     "x",
     "y",

package/lib/svg/data/attributes.mjs

@@ -27,6 +27,7 @@ const badSoftwareAttributes = /* @__PURE__ */ new Set([
   "overflow",
   "marker",
   "white-space",
+  // Font stuff
   "direction"
 ]);
 const badAttributePrefixes = /* @__PURE__ */ new Set([
@@ -35,6 +36,7 @@ const badAttributePrefixes = /* @__PURE__ */ new Set([
   "block",
   "data",
   "aria",
+  // Font stuff
   "text",
   "font",
   "letter",
@@ -42,6 +44,7 @@ const badAttributePrefixes = /* @__PURE__ */ new Set([
   "word",
   "line",
   "writing",
+  // Prefix for browser specific stuff
   ""
 ]);
 const commonAttributes = /* @__PURE__ */ new Set(["id"]);
@@ -153,12 +156,15 @@ const tagSpecificAnimatedAttributes = {
   rect: /* @__PURE__ */ new Set(["x", "y", "width", "height", "rx", "ry"])
 };
 const tagSpecificPresentationalAttributes = {
+  // SVG
   svg: /* @__PURE__ */ new Set(["width", "height", ...presentationalAttributes]),
+  // Defnitions, containers and masks
   clipPath: /* @__PURE__ */ new Set([...presentationalAttributes]),
   defs: /* @__PURE__ */ new Set([]),
   g: /* @__PURE__ */ new Set([...presentationalAttributes]),
   mask: /* @__PURE__ */ new Set(["x", "y", "width", "height", ...presentationalAttributes]),
   symbol: /* @__PURE__ */ new Set(["x", "y", "width", "height", ...presentationalAttributes]),
+  // Use
   use: /* @__PURE__ */ new Set([
     "x",
     "y",
@@ -168,7 +174,9 @@ const tagSpecificPresentationalAttributes = {
     "refY",
     ...presentationalAttributes
   ]),
+  // Marker
   marker: /* @__PURE__ */ new Set([...presentationalAttributes]),
+  // Gradients
   linearGradient: /* @__PURE__ */ new Set([
     "x1",
     "x2",
@@ -186,6 +194,7 @@ const tagSpecificPresentationalAttributes = {
     ...presentationalAttributes
   ]),
   stop: /* @__PURE__ */ new Set(["offset", "stop-color", "stop-opacity"]),
+  // Filters
   feFlood: /* @__PURE__ */ new Set(["flood-color", "flood-opacity"]),
   feDropShadow: /* @__PURE__ */ new Set(["flood-color", "flood-opacity"])
 };
@@ -203,10 +212,13 @@ filterChildTags.forEach((tag) => {
   ]);
 });
 const tagSpecificNonPresentationalAttributes = {
+  // SVG
   svg: /* @__PURE__ */ new Set(["xmlns", "viewBox", "preserveAspectRatio"]),
+  // Defnitions, containers and masks
   clipPath: /* @__PURE__ */ new Set(["clipPathUnits"]),
   mask: /* @__PURE__ */ new Set(["maskContentUnits", "maskUnits"]),
   symbol: /* @__PURE__ */ new Set(["viewBox", "preserveAspectRatio"]),
+  // Shapes
   circle: /* @__PURE__ */ new Set([...otherShapeAttributes]),
   ellipse: /* @__PURE__ */ new Set([...otherShapeAttributes]),
   line: /* @__PURE__ */ new Set([...otherShapeAttributes]),
@@ -214,7 +226,9 @@ const tagSpecificNonPresentationalAttributes = {
   polygon: /* @__PURE__ */ new Set([...otherShapeAttributes]),
   polyline: /* @__PURE__ */ new Set([...otherShapeAttributes]),
   rect: /* @__PURE__ */ new Set([...otherShapeAttributes]),
+  // Use
   use: /* @__PURE__ */ new Set(["href"]),
+  // Marker
   marker: /* @__PURE__ */ new Set([
     "markerHeight",
     "markerUnits",
@@ -225,6 +239,7 @@ const tagSpecificNonPresentationalAttributes = {
     "refY",
     "viewBox"
   ]),
+  // Animations
   animate: /* @__PURE__ */ new Set([
     ...animationTimingAttributes,
     ...animationValueAttributes,
@@ -254,8 +269,10 @@ const tagSpecificNonPresentationalAttributes = {
     ...otherAnimationAttributes
   ]),
   mpath: /* @__PURE__ */ new Set(["href"]),
+  // Gradients
   linearGradient: /* @__PURE__ */ new Set([...commonGradientAttributes]),
   radialGradient: /* @__PURE__ */ new Set([...commonGradientAttributes]),
+  // Filters
   feSpotLight: /* @__PURE__ */ new Set([
     "x",
     "y",

package/lib/svg/data/tags.cjs

@@ -1,23 +1,29 @@
 'use strict';
 
 const badTags = /* @__PURE__ */ new Set([
+  // Nasty stuff or external resource
   "foreignObject",
   "script",
   "image",
   "feImage",
+  // Deprecated
   "animateColor",
   "altGlyph",
+  // Text
   "text",
   "tspan",
   "switch",
   "textPath",
+  // Font
   "font",
   "font-face",
   "glyph",
   "missing-glyph",
   "hkern",
   "vhern",
+  // View
   "view",
+  // Link
   "a"
 ]);
 const unsupportedTags = /* @__PURE__ */ new Set(["metadata", "desc", "title"]);

package/lib/svg/data/tags.mjs

@@ -1,21 +1,27 @@
 const badTags = /* @__PURE__ */ new Set([
+  // Nasty stuff or external resource
   "foreignObject",
   "script",
   "image",
   "feImage",
+  // Deprecated
   "animateColor",
   "altGlyph",
+  // Text
   "text",
   "tspan",
   "switch",
   "textPath",
+  // Font
   "font",
   "font-face",
   "glyph",
   "missing-glyph",
   "hkern",
   "vhern",
+  // View
   "view",
+  // Link
   "a"
 ]);
 const unsupportedTags = /* @__PURE__ */ new Set(["metadata", "desc", "title"]);

package/lib/svg/index.cjs

@@ -4,9 +4,15 @@ const cheerio = require('cheerio');
 const utils = require('@iconify/utils');
 
 class SVG {
+  /**
+   * Constructor
+   */
   constructor(content) {
     this.load(content);
   }
+  /**
+   * Get SVG as string
+   */
   toString(customisations) {
     if (customisations) {
       const data = utils.iconToSVG(this.getIcon(), customisations);
@@ -36,9 +42,15 @@ class SVG {
     }
     return this.$svg.html();
   }
+  /**
+   * Get SVG as string without whitespaces
+   */
   toMinifiedString(customisations) {
     return utils.trimSVG(this.toString(customisations));
   }
+  /**
+   * Get body
+   */
   getBody() {
     const $root = this.$svg(":root");
     const attribs = $root.get(0).attribs;
@@ -54,6 +66,9 @@ class SVG {
     }
     return utils.trimSVG(this.$svg("svg").html());
   }
+  /**
+   * Get icon as IconifyIcon
+   */
   getIcon() {
     const props = this.viewBox;
     const body = this.getBody();
@@ -62,6 +77,11 @@ class SVG {
       body
     };
   }
+  /**
+   * Load SVG
+   *
+   * @param {string} content
+   */
   load(content) {
     function remove(str1, str2, append) {
       let start = 0;

package/lib/svg/index.mjs

@@ -2,9 +2,15 @@ import cheerio from 'cheerio';
 import { iconToSVG, trimSVG } from '@iconify/utils';
 
 class SVG {
+  /**
+   * Constructor
+   */
   constructor(content) {
     this.load(content);
   }
+  /**
+   * Get SVG as string
+   */
   toString(customisations) {
     if (customisations) {
       const data = iconToSVG(this.getIcon(), customisations);
@@ -34,9 +40,15 @@ class SVG {
     }
     return this.$svg.html();
   }
+  /**
+   * Get SVG as string without whitespaces
+   */
   toMinifiedString(customisations) {
     return trimSVG(this.toString(customisations));
   }
+  /**
+   * Get body
+   */
   getBody() {
     const $root = this.$svg(":root");
     const attribs = $root.get(0).attribs;
@@ -52,6 +64,9 @@ class SVG {
     }
     return trimSVG(this.$svg("svg").html());
   }
+  /**
+   * Get icon as IconifyIcon
+   */
   getIcon() {
     const props = this.viewBox;
     const body = this.getBody();
@@ -60,6 +75,11 @@ class SVG {
       body
     };
   }
+  /**
+   * Load SVG
+   *
+   * @param {string} content
+   */
   load(content) {
     function remove(str1, str2, append) {
       let start = 0;

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": "2.2.0",
+  "version": "2.2.2",
   "license": "MIT",
   "bugs": "https://github.com/iconify/tools/issues",
   "homepage": "https://github.com/iconify/tools",
@@ -16,35 +16,35 @@
   "types": "./lib/index.d.ts",
   "dependencies": {
     "@iconify/types": "^2.0.0",
-    "@iconify/utils": "^2.0.9",
+    "@iconify/utils": "^2.1.0",
     "@types/cheerio": "^0.22.31",
     "@types/node-fetch": "^2.6.2",
     "@types/tar": "^6.1.3",
     "cheerio": "^1.0.0-rc.12",
     "extract-zip": "^2.0.1",
     "local-pkg": "^0.4.2",
-    "node-fetch": "^2.6.7",
+    "node-fetch": "^2.6.8",
     "pathe": "^1.0.0",
     "svgo": "^3.0.2",
     "tar": "^6.1.13"
   },
   "devDependencies": {
-    "@types/jest": "^29.2.4",
-    "@types/node": "^18.11.17",
-    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.47.0",
+    "@types/jest": "^29.2.5",
+    "@types/node": "^18.11.18",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.30.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^8.32.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-jasmine": "^4.1.3",
     "eslint-plugin-prettier": "^4.2.1",
     "jasmine": "^4.5.0",
     "jest": "^29.3.1",
-    "prettier": "^2.8.1",
+    "prettier": "^2.8.3",
     "rimraf": "^3.0.2",
-    "ts-jest": "^29.0.3",
+    "ts-jest": "^29.0.5",
     "typescript": "^4.9.4",
-    "unbuild": "^1.0.2"
+    "unbuild": "^1.1.1"
   },
   "exports": {
     "./*": "./*",