@iconify/tools 2.0.8 → 2.0.12

package/lib/colors/parse.d.ts

@@ -1,6 +1,7 @@
 import type { Color } from '@iconify/utils/lib/colors/types';
 import type { SVG } from '../svg';
 import { ColorAttributes } from './attribs';
+import type { AnalyseSVGStructureResult, ElementsTreeItem, ExtendedTagElement, AnalyseSVGStructureOptions } from '../svg/analyse/types';
 /**
  * Result
  */
@@ -19,16 +20,31 @@ export interface FindColorsResult {
  * - 'remove' to remove shape or rule
  */
 declare type ParseColorsCallbackResult = Color | string | 'remove' | 'unset';
-declare type ParseColorsCallback = (attr: ColorAttributes, colorString: string, parsedColor: Color | null, tagName?: string) => ParseColorsCallbackResult | Promise<ParseColorsCallbackResult>;
+declare type ParseColorsCallback = (attr: ColorAttributes, colorString: string, parsedColor: Color | null, tagName?: string, item?: ExtendedTagElementWithColors) => ParseColorsCallbackResult | Promise<ParseColorsCallbackResult>;
+/**
+ * Callback for default color
+ */
+export declare type ParseColorOptionsDefaultColorCallback = (prop: string, item: ExtendedTagElementWithColors, treeItem: ElementsTreeItem, iconData: AnalyseSVGStructureResult) => Color;
 /**
  * Options
  */
-export interface ParseColorsOptions {
+export interface ParseColorsOptions extends AnalyseSVGStructureOptions {
     callback?: ParseColorsCallback;
-    defaultColor?: Color | string;
+    defaultColor?: Color | string | ParseColorOptionsDefaultColorCallback;
+}
+/**
+ * Extend properties for element
+ */
+declare type ItemColors = Partial<Record<ColorAttributes, Color | string>>;
+export interface ExtendedTagElementWithColors extends ExtendedTagElement {
+    _colors?: ItemColors;
+    _removed?: boolean;
 }
 /**
  * Find colors in icon
+ *
+ * Clean up icon before running this function to convert style to attributes using
+ * cleanupInlineStyle() or cleanupSVG(), otherwise results might be inaccurate
  */
 export declare function parseColors(svg: SVG, options?: ParseColorsOptions): Promise<FindColorsResult>;
 /**

package/lib/colors/parse.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isEmptyColor = exports.parseColors = void 0;
 const colors_1 = require("@iconify/utils/lib/colors");
-const parse_1 = require("../svg/parse");
 const tags_1 = require("../svg/data/tags");
 const parse_style_1 = require("../svg/parse-style");
 const attribs_1 = require("./attribs");
 const attributes_1 = require("../svg/data/attributes");
+const analyse_1 = require("../svg/analyse");
 /**
  * Properties to check
  */
@@ -14,6 +14,9 @@ const propsToCheck = Object.keys(attribs_1.defaultColorValues);
 const animatePropsToCheck = ['from', 'to', 'values'];
 /**
  * Find colors in icon
+ *
+ * Clean up icon before running this function to convert style to attributes using
+ * cleanupInlineStyle() or cleanupSVG(), otherwise results might be inaccurate
  */
 async function parseColors(svg, options = {}) {
     const result = {
@@ -25,6 +28,9 @@ async function parseColors(svg, options = {}) {
     const defaultColor = typeof options.defaultColor === 'string'
         ? (0, colors_1.stringToColor)(options.defaultColor)
         : options.defaultColor;
+    /**
+     * Find matching color in results
+     */
     function findColor(color, add = false) {
         const isString = typeof color === 'string';
         for (let i = 0; i < result.colors.length; i++) {
@@ -47,29 +53,31 @@ async function parseColors(svg, options = {}) {
     /**
      * Add color to item and to results
      */
-    function addColorToItem(prop, color, item) {
-        const addedColor = findColor(color, true);
+    function addColorToItem(prop, color, item, add = true) {
+        const addedColor = findColor(color, add !== false);
         if (item) {
-            const itemColors = item.colors || {};
-            if (!item.colors) {
-                item.colors = itemColors;
-            }
-            itemColors[prop] = addedColor;
+            const itemColors = item._colors || (item._colors = {});
+            itemColors[prop] = addedColor === null ? color : addedColor;
         }
     }
     /**
      * Get element color
      */
-    function getElementColor(prop, item) {
+    function getElementColor(prop, item, elements) {
         function find(prop) {
             var _a;
             let currentItem = item;
             while (currentItem) {
-                const color = (_a = currentItem.colors) === null || _a === void 0 ? void 0 : _a[prop];
+                const element = elements.get(currentItem.index);
+                const color = (_a = element._colors) === null || _a === void 0 ? void 0 : _a[prop];
                 if (color !== void 0) {
                     return color;
                 }
-                currentItem = currentItem.parents[0];
+                currentItem = currentItem.parent;
+                if (currentItem === null || currentItem === void 0 ? void 0 : currentItem.usedAsMask) {
+                    // Used as mask: color from parent item is irrelevant
+                    return attribs_1.defaultColorValues[prop];
+                }
             }
             return attribs_1.defaultColorValues[prop];
         }
@@ -95,13 +103,19 @@ async function parseColors(svg, options = {}) {
         // Resolve color
         const parsedColor = (0, colors_1.stringToColor)(value);
         const defaultValue = parsedColor || value;
+        // Ignore url()
+        if ((parsedColor === null || parsedColor === void 0 ? void 0 : parsedColor.type) === 'function' && parsedColor.func === 'url') {
+            // Add to item, so it won't be treated as missing, but do not add to results
+            addColorToItem(prop, defaultValue, item, false);
+            return value;
+        }
         // Check if callback exists
         if (!options.callback) {
             addColorToItem(prop, defaultValue, item);
             return value;
         }
         // Call callback
-        let callbackResult = options.callback(prop, value, parsedColor, item === null || item === void 0 ? void 0 : item.tagName);
+        let callbackResult = options.callback(prop, value, parsedColor, item === null || item === void 0 ? void 0 : item.tagName, item);
         callbackResult =
             callbackResult instanceof Promise
                 ? await callbackResult
@@ -109,11 +123,7 @@ async function parseColors(svg, options = {}) {
         // Remove entry
         switch (callbackResult) {
             case 'remove': {
-                if (item) {
-                    item.$element.remove();
-                    item.testChildren = false;
-                }
-                return;
+                return item ? callbackResult : void 0;
             }
             case 'unset':
                 return;
@@ -152,19 +162,58 @@ async function parseColors(svg, options = {}) {
             result.hasGlobalStyle = true;
         }
         return newValue;
-    }, {
-        skipMasks: true,
     });
-    // Parse colors in SVG
-    await (0, parse_1.parseSVG)(svg, async (item) => {
-        const tagName = item.tagName;
-        if (tags_1.maskAndSymbolTags.has(tagName)) {
-            // Ignore masks
-            item.testChildren = false;
+    // Analyse SVG
+    const iconData = await (0, analyse_1.analyseSVGStructure)(svg, options);
+    const { elements, tree } = iconData;
+    const cheerio = svg.$svg;
+    const removedElements = new Set();
+    const parsedElements = new Set();
+    // Remove element
+    function removeElement(index, element) {
+        // Mark all children as removed (direct children as in DOM)
+        function removeChildren(element) {
+            element.children.forEach((item) => {
+                if (item.type !== 'tag') {
+                    return;
+                }
+                const element = item;
+                const index = element._index;
+                if (index && !removedElements.has(index)) {
+                    element._removed = true;
+                    removedElements.add(index);
+                    removeChildren(element);
+                }
+            });
+        }
+        // Remove element
+        element._removed = true;
+        removedElements.add(index);
+        removeChildren(element);
+        cheerio(element).remove();
+    }
+    // Parse tree item
+    async function parseTreeItem(item) {
+        const index = item.index;
+        if (removedElements.has(index) || parsedElements.has(index)) {
+            return;
+        }
+        parsedElements.add(index);
+        const element = elements.get(index);
+        if (element._removed) {
             return;
         }
-        const $element = item.$element;
-        const attribs = item.element.attribs;
+        const { tagName, attribs } = element;
+        // Copy colors from parent item
+        if (item.parent) {
+            const parentIndex = item.parent.index;
+            const parentElement = elements.get(parentIndex);
+            if (parentElement._colors) {
+                element._colors = {
+                    ...parentElement._colors,
+                };
+            }
+        }
         // Check common properties
         for (let i = 0; i < propsToCheck.length; i++) {
             const prop = propsToCheck[i];
@@ -174,13 +223,24 @@ async function parseColors(svg, options = {}) {
             }
             const value = attribs[prop];
             if (value !== void 0) {
-                const newValue = await checkColor(prop, value, item);
+                const newValue = await checkColor(prop, value, element);
                 if (newValue !== value) {
                     if (newValue === void 0) {
-                        $element.removeAttr(prop);
+                        // Unset
+                        cheerio(element).removeAttr(prop);
+                        if (element._colors) {
+                            delete element._colors[prop];
+                        }
+                    }
+                    else if (newValue === 'remove') {
+                        // Remove element
+                        removeElement(index, element);
+                        return;
                     }
                     else {
-                        $element.attr(prop, newValue);
+                        // Change attribute
+                        // Value in element._colors is changed in checkColor()
+                        cheerio(element).attr(prop, newValue);
                     }
                 }
             }
@@ -216,7 +276,7 @@ async function parseColors(svg, options = {}) {
                     }
                     // Merge values back
                     if (updatedValues) {
-                        $element.attr(elementProp, splitValues.join(';'));
+                        cheerio(element).attr(elementProp, splitValues.join(';'));
                     }
                 }
             }
@@ -236,20 +296,20 @@ async function parseColors(svg, options = {}) {
             });
             // Check colors
             if (requiredProps) {
-                const itemColors = item.colors || {};
-                if (!item.colors) {
-                    item.colors = itemColors;
-                }
+                const itemColors = element._colors || (element._colors = {});
                 for (let i = 0; i < requiredProps.length; i++) {
                     const prop = requiredProps[i];
-                    const color = getElementColor(prop, item);
+                    const color = getElementColor(prop, item, elements);
                     if (color === attribs_1.defaultBlackColor) {
                         // Default black color: change it
                         if (defaultColor) {
+                            const defaultColorValue = typeof defaultColor === 'function'
+                                ? defaultColor(prop, element, item, iconData)
+                                : defaultColor;
                             // Add color to results and change attribute
-                            findColor(defaultColor, true);
-                            $element.attr(prop, (0, colors_1.colorToString)(defaultColor));
-                            itemColors[prop] = defaultColor;
+                            findColor(defaultColorValue, true);
+                            cheerio(element).attr(prop, (0, colors_1.colorToString)(defaultColorValue));
+                            itemColors[prop] = defaultColorValue;
                         }
                         else {
                             result.hasUnsetColor = true;
@@ -258,7 +318,16 @@ async function parseColors(svg, options = {}) {
                 }
             }
         }
-    });
+        // Parse child elements
+        for (let i = 0; i < item.children.length; i++) {
+            const childItem = item.children[i];
+            if (!childItem.usedAsMask) {
+                await parseTreeItem(childItem);
+            }
+        }
+    }
+    // Parse tree, starting with <svg>
+    await parseTreeItem(tree);
     return result;
 }
 exports.parseColors = parseColors;

package/lib/colors/parse.mjs

@@ -4,8 +4,7 @@ import {
   stringToColor,
   colorToString
 } from "@iconify/utils/lib/colors";
-import { parseSVG } from "../svg/parse.mjs";
-import { animateTags, maskAndSymbolTags, shapeTags } from "../svg/data/tags.mjs";
+import { animateTags, shapeTags } from "../svg/data/tags.mjs";
 import { parseSVGStyle } from "../svg/parse-style.mjs";
 import {
   defaultBlackColor,
@@ -14,6 +13,7 @@ import {
   specialColorAttributes
 } from "./attribs.mjs";
 import { tagSpecificPresentationalAttributes } from "../svg/data/attributes.mjs";
+import { analyseSVGStructure } from "../svg/analyse.mjs";
 var propsToCheck = Object.keys(defaultColorValues);
 var animatePropsToCheck = ["from", "to", "values"];
 async function parseColors(svg, options = {}) {
@@ -40,26 +40,27 @@ async function parseColors(svg, options = {}) {
     }
     return null;
   }
-  function addColorToItem(prop, color, item) {
-    const addedColor = findColor(color, true);
+  function addColorToItem(prop, color, item, add = true) {
+    const addedColor = findColor(color, add !== false);
     if (item) {
-      const itemColors = item.colors || {};
-      if (!item.colors) {
-        item.colors = itemColors;
-      }
-      itemColors[prop] = addedColor;
+      const itemColors = item._colors || (item._colors = {});
+      itemColors[prop] = addedColor === null ? color : addedColor;
     }
   }
-  function getElementColor(prop, item) {
+  function getElementColor(prop, item, elements2) {
     function find(prop2) {
       var _a;
       let currentItem = item;
       while (currentItem) {
-        const color = (_a = currentItem.colors) == null ? void 0 : _a[prop2];
+        const element = elements2.get(currentItem.index);
+        const color = (_a = element._colors) == null ? void 0 : _a[prop2];
         if (color !== void 0) {
           return color;
         }
-        currentItem = currentItem.parents[0];
+        currentItem = currentItem.parent;
+        if (currentItem == null ? void 0 : currentItem.usedAsMask) {
+          return defaultColorValues[prop2];
+        }
       }
       return defaultColorValues[prop2];
     }
@@ -77,19 +78,19 @@ async function parseColors(svg, options = {}) {
     }
     const parsedColor = stringToColor(value);
     const defaultValue = parsedColor || value;
+    if ((parsedColor == null ? void 0 : parsedColor.type) === "function" && parsedColor.func === "url") {
+      addColorToItem(prop, defaultValue, item, false);
+      return value;
+    }
     if (!options.callback) {
       addColorToItem(prop, defaultValue, item);
       return value;
     }
-    let callbackResult = options.callback(prop, value, parsedColor, item == null ? void 0 : item.tagName);
+    let callbackResult = options.callback(prop, value, parsedColor, item == null ? void 0 : item.tagName, item);
     callbackResult = callbackResult instanceof Promise ? await callbackResult : callbackResult;
     switch (callbackResult) {
       case "remove": {
-        if (item) {
-          item.$element.remove();
-          item.testChildren = false;
-        }
-        return;
+        return item ? callbackResult : void 0;
       }
       case "unset":
         return;
@@ -122,17 +123,52 @@ async function parseColors(svg, options = {}) {
       result.hasGlobalStyle = true;
     }
     return newValue;
-  }, {
-    skipMasks: true
   });
-  await parseSVG(svg, async (item) => {
-    const tagName = item.tagName;
-    if (maskAndSymbolTags.has(tagName)) {
-      item.testChildren = false;
+  const iconData = await analyseSVGStructure(svg, options);
+  const { elements, tree } = iconData;
+  const cheerio = svg.$svg;
+  const removedElements = new Set();
+  const parsedElements = new Set();
+  function removeElement(index, element) {
+    function removeChildren(element2) {
+      element2.children.forEach((item) => {
+        if (item.type !== "tag") {
+          return;
+        }
+        const element3 = item;
+        const index2 = element3._index;
+        if (index2 && !removedElements.has(index2)) {
+          element3._removed = true;
+          removedElements.add(index2);
+          removeChildren(element3);
+        }
+      });
+    }
+    element._removed = true;
+    removedElements.add(index);
+    removeChildren(element);
+    cheerio(element).remove();
+  }
+  async function parseTreeItem(item) {
+    const index = item.index;
+    if (removedElements.has(index) || parsedElements.has(index)) {
       return;
     }
-    const $element = item.$element;
-    const attribs = item.element.attribs;
+    parsedElements.add(index);
+    const element = elements.get(index);
+    if (element._removed) {
+      return;
+    }
+    const { tagName, attribs } = element;
+    if (item.parent) {
+      const parentIndex = item.parent.index;
+      const parentElement = elements.get(parentIndex);
+      if (parentElement._colors) {
+        element._colors = {
+          ...parentElement._colors
+        };
+      }
+    }
     for (let i = 0; i < propsToCheck.length; i++) {
       const prop = propsToCheck[i];
       if (prop === "fill" && animateTags.has(tagName)) {
@@ -140,12 +176,18 @@ async function parseColors(svg, options = {}) {
       }
       const value = attribs[prop];
       if (value !== void 0) {
-        const newValue = await checkColor(prop, value, item);
+        const newValue = await checkColor(prop, value, element);
         if (newValue !== value) {
           if (newValue === void 0) {
-            $element.removeAttr(prop);
+            cheerio(element).removeAttr(prop);
+            if (element._colors) {
+              delete element._colors[prop];
+            }
+          } else if (newValue === "remove") {
+            removeElement(index, element);
+            return;
           } else {
-            $element.attr(prop, newValue);
+            cheerio(element).attr(prop, newValue);
           }
         }
       }
@@ -172,7 +214,7 @@ async function parseColors(svg, options = {}) {
             }
           }
           if (updatedValues) {
-            $element.attr(elementProp, splitValues.join(";"));
+            cheerio(element).attr(elementProp, splitValues.join(";"));
           }
         }
       }
@@ -189,18 +231,16 @@ async function parseColors(svg, options = {}) {
         }
       });
       if (requiredProps) {
-        const itemColors = item.colors || {};
-        if (!item.colors) {
-          item.colors = itemColors;
-        }
+        const itemColors = element._colors || (element._colors = {});
         for (let i = 0; i < requiredProps.length; i++) {
           const prop = requiredProps[i];
-          const color = getElementColor(prop, item);
+          const color = getElementColor(prop, item, elements);
           if (color === defaultBlackColor) {
             if (defaultColor) {
-              findColor(defaultColor, true);
-              $element.attr(prop, colorToString(defaultColor));
-              itemColors[prop] = defaultColor;
+              const defaultColorValue = typeof defaultColor === "function" ? defaultColor(prop, element, item, iconData) : defaultColor;
+              findColor(defaultColorValue, true);
+              cheerio(element).attr(prop, colorToString(defaultColorValue));
+              itemColors[prop] = defaultColorValue;
             } else {
               result.hasUnsetColor = true;
             }
@@ -208,7 +248,14 @@ async function parseColors(svg, options = {}) {
         }
       }
     }
-  });
+    for (let i = 0; i < item.children.length; i++) {
+      const childItem = item.children[i];
+      if (!childItem.usedAsMask) {
+        await parseTreeItem(childItem);
+      }
+    }
+  }
+  await parseTreeItem(tree);
   return result;
 }
 function isEmptyColor(color) {

package/lib/colors/validate.js

@@ -35,9 +35,12 @@ async function validateColors(svg, expectMonotone, options) {
                     throw new Error('Unexpected color: ' + (0, colors_1.colorToString)(color));
                 }
                 return;
-            // Do not allow other colors
             default:
-                throw new Error('Unexpected color: ' + (0, colors_1.colorToString)(color));
+                // Allow url()
+                if (color.type !== 'function' || color.func !== 'url') {
+                    // Do not allow other colors
+                    throw new Error('Unexpected color: ' + (0, colors_1.colorToString)(color));
+                }
         }
     });
     return palette;

package/lib/colors/validate.mjs

@@ -23,7 +23,9 @@ async function validateColors(svg, expectMonotone, options) {
         }
         return;
       default:
-        throw new Error("Unexpected color: " + colorToString(color));
+        if (color.type !== "function" || color.func !== "url") {
+          throw new Error("Unexpected color: " + colorToString(color));
+        }
     }
   });
   return palette;

package/lib/icon-set/index.js

@@ -71,7 +71,6 @@ class IconSet {
                         parent,
                         props,
                         chars,
-                        categories: new Set(),
                     };
                     entries[name] = entry;
                 }
@@ -111,7 +110,6 @@ class IconSet {
                     const icon = entries[iconName];
                     switch (icon === null || icon === void 0 ? void 0 : icon.type) {
                         case 'icon':
-                        case 'variation':
                             icon.categories.add(item);
                     }
                 });
@@ -342,6 +340,7 @@ class IconSet {
             .forEach((item) => {
             const names = this.listCategory(item);
             if (names) {
+                names.sort((a, b) => a.localeCompare(b));
                 categories[item.title] = names;
             }
         });
@@ -460,8 +459,8 @@ class IconSet {
             return null;
         }
         // Find icons
-        const icons = this._filter((_key, item, icon) => {
-            if (item.type === 'alias' || item.props.hidden || (icon === null || icon === void 0 ? void 0 : icon.hidden)) {
+        const icons = this._filter((_key, item) => {
+            if (item.type !== 'icon' || item.props.hidden) {
                 return false;
             }
             return item.categories.has(categoryItem);
@@ -619,26 +618,11 @@ class IconSet {
      * Add/update alias with props
      */
     setVariation(name, parent, props) {
-        // Copy categories
-        let categories;
-        while (!categories) {
-            const parentItem = this.entries[parent];
-            if (!parentItem) {
-                return false;
-            }
-            if (parentItem.type === 'alias') {
-                parent = parentItem.parent;
-            }
-            else {
-                categories = new Set(parentItem.categories);
-            }
-        }
         return this.setItem(name, {
             type: 'variation',
             parent,
             props,
             chars: new Set(),
-            categories,
         });
     }
     /**
@@ -664,7 +648,7 @@ class IconSet {
                     body,
                     props,
                     chars: item.chars,
-                    categories: item.categories,
+                    categories: item.type === 'icon' ? item.categories : new Set(),
                 });
             }
         }
@@ -699,7 +683,6 @@ class IconSet {
         }
         switch (item.type) {
             case 'icon':
-            case 'variation':
                 if (item.categories.has(categoryItem) !== add) {
                     categoryItem.count += add ? 1 : -1;
                     item.categories[add ? 'add' : 'delete'](categoryItem);