@iconify/tools 2.2.0-beta.4 → 2.2.1

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;