@iconify/tools 1.3.17 → 2.0.0-dev.2

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

@@ -0,0 +1,88 @@
+// src/svg/cleanup/root-svg.ts
+import {
+  badAttributes,
+  badAttributePrefixes,
+  badSoftwareAttributes,
+  commonAttributes,
+  junkSVGAttributes,
+  stylingAttributes,
+  tagSpecificNonPresentationalAttributes,
+  tagSpecificPresentationalAttributes
+} from "../data/attributes.mjs";
+import { maskAndSymbolTags } from "../data/tags.mjs";
+async function cleanupSVGRoot(svg) {
+  const cheerio = svg.$svg;
+  const $root = svg.$svg(":root");
+  const root = $root.get(0);
+  const tagName = "svg";
+  if (root.tagName !== tagName) {
+    throw new Error(`Unexpected root tag <${root.tagName}>`);
+  }
+  const attribs = root.attribs;
+  const moveToChildren = {};
+  Object.keys(attribs).forEach((attr) => {
+    var _a, _b;
+    const value = attribs[attr];
+    if (commonAttributes.has(attr) || badAttributes.has(attr) || junkSVGAttributes.has(attr) || badSoftwareAttributes.has(attr) || badAttributePrefixes.has(attr.split("-").shift()) || attr.split(":").length > 1) {
+      $root.removeAttr(attr);
+      return;
+    }
+    switch (attr) {
+      case "width":
+      case "height":
+        if (value.slice(-2) === "px") {
+          const num = value.replace("px", "");
+          if (parseFloat(num) + "" === num) {
+            $root.attr(attr, num);
+          }
+        }
+        return;
+    }
+    if ((_a = tagSpecificNonPresentationalAttributes[tagName]) == null ? void 0 : _a.has(attr)) {
+      return;
+    }
+    if (((_b = tagSpecificPresentationalAttributes[tagName]) == null ? void 0 : _b.has(attr)) && tagSpecificPresentationalAttributes.g.has(attr)) {
+      moveToChildren[attr] = value;
+      $root.removeAttr(attr);
+      return;
+    }
+    if (stylingAttributes.has(attr)) {
+      switch (attr) {
+        case "style":
+          return;
+        case "class":
+          $root.removeAttr(attr);
+          return;
+      }
+      throw new Error(`Unexpected attribute "${attr}" on <${tagName}>`);
+    }
+    if (attr.slice(0, 2) === "on" || attr.slice(0, 5) === "aria-" || attr.slice(0, 6) === "xmlns:") {
+      $root.removeAttr(attr);
+      return;
+    }
+    console.log(`Removing unexpected attribute on SVG: ${attr}`);
+    $root.removeAttr(attr);
+  });
+  if (Object.keys(moveToChildren).length) {
+    const $wrapper = cheerio("<g />");
+    for (const key in moveToChildren) {
+      $wrapper.attr(key, moveToChildren[key]);
+    }
+    $root.children().each((index, child) => {
+      const $child = cheerio(child);
+      if (child.type !== "tag") {
+        $child.appendTo($wrapper);
+        return;
+      }
+      const tagName2 = child.tagName;
+      if (tagName2 === "style" || maskAndSymbolTags.has(tagName2)) {
+        return;
+      }
+      $child.appendTo($wrapper);
+    });
+    $wrapper.appendTo($root);
+  }
+}
+export {
+  cleanupSVGRoot
+};

package/lib/svg/cleanup/svgo-style.d.ts

@@ -0,0 +1,5 @@
+import type { SVG } from '..';
+/**
+ * Expand inline style
+ */
+export declare function convertStyleToAttrs(svg: SVG): Promise<void>;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertStyleToAttrs = void 0;
+const attributes_1 = require("../data/attributes");
+const parse_style_1 = require("../parse-style");
+const svgo_1 = require("../../optimise/svgo");
+/**
+ * Expand inline style
+ */
+async function convertStyleToAttrs(svg) {
+    let hasStyle = false;
+    // Clean up style, removing useless junk
+    await (0, parse_style_1.parseSVGStyle)(svg, (item) => {
+        const prop = item.prop;
+        if (
+        // Attributes / properties now allowed
+        attributes_1.badAttributes.has(prop) ||
+            attributes_1.badSoftwareAttributes.has(prop) ||
+            attributes_1.badAttributePrefixes.has(prop.split('-').shift())) {
+            return void 0;
+        }
+        hasStyle = true;
+        return item.value;
+    });
+    // Nothing to check?
+    if (!hasStyle) {
+        return;
+    }
+    // Run SVGO
+    await (0, svgo_1.runSVGO)(svg, {
+        plugins: ['convertStyleToAttrs', 'inlineStyles'],
+        multipass: true,
+    });
+}
+exports.convertStyleToAttrs = convertStyleToAttrs;

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

@@ -0,0 +1,29 @@
+// src/svg/cleanup/svgo-style.ts
+import {
+  badAttributes,
+  badAttributePrefixes,
+  badSoftwareAttributes
+} from "../data/attributes.mjs";
+import { parseSVGStyle } from "../parse-style.mjs";
+import { runSVGO } from "../../optimise/svgo.mjs";
+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())) {
+      return void 0;
+    }
+    hasStyle = true;
+    return item.value;
+  });
+  if (!hasStyle) {
+    return;
+  }
+  await runSVGO(svg, {
+    plugins: ["convertStyleToAttrs", "inlineStyles"],
+    multipass: true
+  });
+}
+export {
+  convertStyleToAttrs
+};

package/lib/svg/cleanup.d.ts

@@ -0,0 +1,5 @@
+import type { SVG } from '.';
+/**
+ * Clean up SVG before parsing/optimising it
+ */
+export declare function cleanupSVG(svg: SVG): Promise<void>;

package/lib/svg/cleanup.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cleanupSVG = void 0;
+const attribs_1 = require("./cleanup/attribs");
+const bad_tags_1 = require("./cleanup/bad-tags");
+const inline_style_1 = require("./cleanup/inline-style");
+const root_svg_1 = require("./cleanup/root-svg");
+const svgo_style_1 = require("./cleanup/svgo-style");
+/**
+ * Clean up SVG before parsing/optimising it
+ */
+async function cleanupSVG(svg) {
+    // Remove junk from style
+    await (0, inline_style_1.cleanupInlineStyle)(svg);
+    // Expand style
+    await (0, svgo_style_1.convertStyleToAttrs)(svg);
+    // Cleanup <svg> element
+    await (0, root_svg_1.cleanupSVGRoot)(svg);
+    // Check for bad tags
+    await (0, bad_tags_1.checkBadTags)(svg);
+    // Remove attributes
+    await (0, attribs_1.removeBadAttributes)(svg);
+}
+exports.cleanupSVG = cleanupSVG;

package/lib/svg/cleanup.mjs

@@ -0,0 +1,16 @@
+// src/svg/cleanup.ts
+import { removeBadAttributes } from "./cleanup/attribs.mjs";
+import { checkBadTags } from "./cleanup/bad-tags.mjs";
+import { cleanupInlineStyle } from "./cleanup/inline-style.mjs";
+import { cleanupSVGRoot } from "./cleanup/root-svg.mjs";
+import { convertStyleToAttrs } from "./cleanup/svgo-style.mjs";
+async function cleanupSVG(svg) {
+  await cleanupInlineStyle(svg);
+  await convertStyleToAttrs(svg);
+  await cleanupSVGRoot(svg);
+  await checkBadTags(svg);
+  await removeBadAttributes(svg);
+}
+export {
+  cleanupSVG
+};

package/lib/svg/data/attributes.d.ts

@@ -0,0 +1,71 @@
+/**
+ * This list is highly opinionated. It is designed to handle icons that can be safely embedded in HTML and linked as external source.
+ * Icons cannot have anything that requires external resources, anything that renders inconsistently.
+ */
+/***** Attributes that are not part of tag specific stuff *****/
+/**
+ * Attributes that icons should not mess with or that are irrelevant. They should be removed
+ */
+export declare const badAttributes: Set<string>;
+/**
+ * Attributes for SVG element that should be removed
+ */
+export declare const junkSVGAttributes: Set<string>;
+/**
+ * Attributes and styles often added by bad software to wrong tags, such as Adobe Illustrator and Inkscape
+ */
+export declare const badSoftwareAttributes: Set<string>;
+export declare const badAttributePrefixes: Set<string>;
+/**
+ * Common attributes that can exist on any element
+ */
+export declare const commonAttributes: Set<string>;
+export declare const stylingAttributes: Set<string>;
+/**
+ * Attributes that exist only on child elements of <clipPath>
+ */
+export declare const insideClipPathAttributes: Set<string>;
+/***** Other attributes, added to tagSpecificAttributes variable below *****/
+/**
+ * Presentational attributes
+ */
+export declare const fillPresentationalAttributes: Set<string>;
+export declare const strokePresentationalAttributes: Set<string>;
+export declare const urlPresentationalAttributes: Set<string>;
+export declare const visibilityPresentationalAttributes: Set<string>;
+export declare const commonColorPresentationalAttributes: Set<string>;
+export declare const otherPresentationalAttributes: Set<string>;
+export declare const presentationalAttributes: Set<string>;
+/**
+ * Markers
+ *
+ * Presentational attributes
+ */
+export declare const markerAttributes: Set<string>;
+/**
+ * Shapes
+ *
+ * Not presentational
+ */
+export declare const otherShapeAttributes: Set<string>;
+/**
+ * Animations
+ */
+export declare const animationTimingAttributes: Set<string>;
+export declare const animationValueAttributes: Set<string>;
+export declare const otherAnimationAttributes: Set<string>;
+/**
+ * Gradients
+ */
+export declare const commonGradientAttributes: Set<string>;
+/**
+ * Filters
+ */
+export declare const commonFeAttributes: Set<string>;
+export declare const feFuncAttributes: Set<string>;
+/**
+ * Tag specific attributes
+ */
+export declare const tagSpecificAnimatedAttributes: Record<string, Set<string>>;
+export declare const tagSpecificPresentationalAttributes: Record<string, Set<string>>;
+export declare const tagSpecificNonPresentationalAttributes: Record<string, Set<string>>;

package/lib/svg/data/attributes.js

@@ -0,0 +1,403 @@
+"use strict";
+/**
+ * This list is highly opinionated. It is designed to handle icons that can be safely embedded in HTML and linked as external source.
+ * Icons cannot have anything that requires external resources, anything that renders inconsistently.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tagSpecificNonPresentationalAttributes = exports.tagSpecificPresentationalAttributes = exports.tagSpecificAnimatedAttributes = exports.feFuncAttributes = exports.commonFeAttributes = exports.commonGradientAttributes = exports.otherAnimationAttributes = exports.animationValueAttributes = exports.animationTimingAttributes = exports.otherShapeAttributes = exports.markerAttributes = exports.presentationalAttributes = exports.otherPresentationalAttributes = exports.commonColorPresentationalAttributes = exports.visibilityPresentationalAttributes = exports.urlPresentationalAttributes = exports.strokePresentationalAttributes = exports.fillPresentationalAttributes = exports.insideClipPathAttributes = exports.stylingAttributes = exports.commonAttributes = exports.badAttributePrefixes = exports.badSoftwareAttributes = exports.junkSVGAttributes = exports.badAttributes = void 0;
+const tags_1 = require("./tags");
+/***** Attributes that are not part of tag specific stuff *****/
+/**
+ * Attributes that icons should not mess with or that are irrelevant. They should be removed
+ */
+exports.badAttributes = new Set([
+    'cursor',
+    'pointer-events',
+    'shape-rendering',
+    'tabindex',
+    'requiredExtensions',
+    'requiredFeatures',
+    'systemLanguage',
+    'role',
+    'title',
+]);
+/**
+ * Attributes for SVG element that should be removed
+ */
+exports.junkSVGAttributes = new Set([
+    'xmlns:xlink',
+    'baseProfile',
+    'contentScriptType',
+    'contentStyleType',
+    'version',
+    'x',
+    'y',
+    'zoomAndPan',
+]);
+/**
+ * Attributes and styles often added by bad software to wrong tags, such as Adobe Illustrator and Inkscape
+ */
+exports.badSoftwareAttributes = new Set([
+    'color-interpolation-filters',
+    'isolation',
+    'enable-background',
+    'overflow',
+    'marker',
+    'white-space',
+    // Font stuff
+    'direction',
+]);
+// Prefixes. First part of attribute before '-', where all possible attributes that start with prefix are invalid
+exports.badAttributePrefixes = new Set([
+    'image',
+    'mix',
+    'block',
+    'data',
+    'aria',
+    // Font stuff
+    'text',
+    'font',
+    'letter',
+    'baseline',
+    'word',
+    'line',
+    'writing',
+    // Prefix for browser specific stuff
+    '',
+]);
+/**
+ * Common attributes that can exist on any element
+ */
+exports.commonAttributes = new Set(['id']);
+exports.stylingAttributes = new Set(['class', 'style']);
+/**
+ * Attributes that exist only on child elements of <clipPath>
+ */
+exports.insideClipPathAttributes = new Set(['clip-rule']);
+/***** Other attributes, added to tagSpecificAttributes variable below *****/
+/**
+ * Presentational attributes
+ */
+// Attributes used for shapes with fill to change fill style
+exports.fillPresentationalAttributes = new Set([
+    'fill-opacity',
+    'fill-rule',
+]);
+// Attributes used for shapes with stroke to change stroke style
+exports.strokePresentationalAttributes = new Set([
+    'stroke-dasharray',
+    'stroke-dashoffset',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-miterlimit',
+    'stroke-opacity',
+    'stroke-width',
+]);
+// Attributes where value is an url()
+exports.urlPresentationalAttributes = new Set([
+    'clip-path',
+    'filter',
+    'mask',
+]);
+// Visibility
+exports.visibilityPresentationalAttributes = new Set([
+    'display',
+    'opacity',
+    'visibility',
+]);
+// Color values
+exports.commonColorPresentationalAttributes = new Set([
+    'color',
+    'fill',
+    'stroke',
+]);
+// Other presentational attributes
+exports.otherPresentationalAttributes = new Set([
+    'color-interpolation',
+    'color-rendering',
+    'transform',
+    'vector-effect',
+]);
+// All presentational attributes
+exports.presentationalAttributes = new Set([
+    ...exports.fillPresentationalAttributes,
+    ...exports.strokePresentationalAttributes,
+    ...exports.urlPresentationalAttributes,
+    ...exports.visibilityPresentationalAttributes,
+    ...exports.commonColorPresentationalAttributes,
+    ...exports.otherPresentationalAttributes,
+]);
+/**
+ * Markers
+ *
+ * Presentational attributes
+ */
+exports.markerAttributes = new Set([
+    'marker-start',
+    'marker-mid',
+    'marker-end',
+]);
+/**
+ * Shapes
+ *
+ * Not presentational
+ */
+exports.otherShapeAttributes = new Set(['pathLength']);
+/**
+ * Animations
+ */
+exports.animationTimingAttributes = new Set([
+    'begin',
+    'dur',
+    'end',
+    'min',
+    'max',
+    'restart',
+    'repeatCount',
+    'repeatDur',
+    'fill',
+]);
+exports.animationValueAttributes = new Set([
+    'calcMode',
+    'values',
+    'keyTimes',
+    'keySplines',
+    'from',
+    'to',
+    'by',
+]);
+exports.otherAnimationAttributes = new Set([
+    'attributeName',
+    'additive',
+    'accumulate',
+]);
+/**
+ * Gradients
+ */
+exports.commonGradientAttributes = new Set([
+    'gradientUnits',
+    'gradientTransform',
+    'href',
+    'spreadMethod',
+]);
+/**
+ * Filters
+ */
+// Presentational, supported by most filters
+exports.commonFeAttributes = new Set([
+    'x',
+    'y',
+    'width',
+    'height',
+    'color-interpolation-filters',
+]);
+exports.feFuncAttributes = new Set([
+    'type',
+    'tableValues',
+    'slope',
+    'intercept',
+    'amplitude',
+    'exponent',
+    'offset',
+    ...exports.commonFeAttributes,
+]);
+/**
+ * Tag specific attributes
+ */
+// Attributes, can be used in animations
+// Most attributes can also be used in style
+exports.tagSpecificAnimatedAttributes = {
+    circle: new Set(['cx', 'cy', 'r']),
+    ellipse: new Set(['cx', 'cy', 'rx', 'ry']),
+    line: new Set(['x1', 'x2', 'y1', 'y2']),
+    path: new Set(['d']),
+    polygon: new Set(['points']),
+    polyline: new Set(['points']),
+    rect: new Set(['x', 'y', 'width', 'height', 'rx', 'ry']),
+};
+// Presentational attributes supported by tags
+exports.tagSpecificPresentationalAttributes = {
+    // SVG
+    svg: new Set(['width', 'height', ...exports.presentationalAttributes]),
+    // Defnitions, containers and masks
+    clipPath: new Set([...exports.presentationalAttributes]),
+    defs: new Set([...exports.presentationalAttributes]),
+    g: new Set([...exports.presentationalAttributes]),
+    mask: new Set(['x', 'y', 'width', 'height', ...exports.presentationalAttributes]),
+    symbol: new Set(['x', 'y', 'width', 'height', ...exports.presentationalAttributes]),
+    // Use
+    use: new Set([
+        'x',
+        'y',
+        'width',
+        'height',
+        'refX',
+        'refY',
+        ...exports.presentationalAttributes,
+    ]),
+    // Marker
+    marker: new Set([...exports.presentationalAttributes]),
+    // Gradients
+    linearGradient: new Set([
+        'x1',
+        'x2',
+        'y1',
+        'y2',
+        ...exports.presentationalAttributes,
+    ]),
+    radialGradient: new Set([
+        'cx',
+        'cy',
+        'fr',
+        'fx',
+        'fy',
+        'r',
+        ...exports.presentationalAttributes,
+    ]),
+    stop: new Set(['offset', 'stop-color', 'stop-opacity']),
+    // Filters
+    feFlood: new Set(['flood-color', 'flood-opacity']),
+    feDropShadow: new Set(['flood-color', 'flood-opacity']),
+};
+tags_1.shapeTags.forEach((tag) => {
+    exports.tagSpecificPresentationalAttributes[tag] = new Set([
+        ...exports.presentationalAttributes,
+        ...exports.markerAttributes,
+        ...(exports.tagSpecificPresentationalAttributes[tag] || []),
+    ]);
+});
+tags_1.filterChildTags.forEach((tag) => {
+    exports.tagSpecificPresentationalAttributes[tag] = new Set([
+        ...exports.commonFeAttributes,
+        ...(exports.tagSpecificPresentationalAttributes[tag] || []),
+    ]);
+});
+// Non-presentational attributes supported by tags
+exports.tagSpecificNonPresentationalAttributes = {
+    // SVG
+    svg: new Set(['xmlns', 'viewBox', 'preserveAspectRatio']),
+    // Defnitions, containers and masks
+    clipPath: new Set(['clipPathUnits']),
+    mask: new Set(['maskContentUnits', 'maskUnits']),
+    symbol: new Set(['viewBox', 'preserveAspectRatio']),
+    // Shapes
+    circle: new Set([...exports.otherShapeAttributes]),
+    ellipse: new Set([...exports.otherShapeAttributes]),
+    line: new Set([...exports.otherShapeAttributes]),
+    path: new Set([...exports.otherShapeAttributes]),
+    polygon: new Set([...exports.otherShapeAttributes]),
+    polyline: new Set([...exports.otherShapeAttributes]),
+    rect: new Set([...exports.otherShapeAttributes]),
+    // Use
+    use: new Set(['href']),
+    // Marker
+    marker: new Set([
+        'markerHeight',
+        'markerUnits',
+        'markerWidth',
+        'orient',
+        'preserveAspectRatio',
+        'refX',
+        'refY',
+        'viewBox',
+    ]),
+    // Animations
+    animate: new Set([
+        ...exports.animationTimingAttributes,
+        ...exports.animationValueAttributes,
+        ...exports.otherAnimationAttributes,
+    ]),
+    animateMotion: new Set([
+        'keyPoints',
+        'path',
+        'rotate',
+        ...exports.animationTimingAttributes,
+        ...exports.animationValueAttributes,
+        ...exports.otherAnimationAttributes,
+    ]),
+    animateTransform: new Set([
+        'by',
+        'from',
+        'to',
+        'type',
+        ...exports.animationTimingAttributes,
+        ...exports.animationValueAttributes,
+        ...exports.otherAnimationAttributes,
+    ]),
+    discard: new Set(['begin', 'href']),
+    set: new Set([
+        'to',
+        ...exports.animationTimingAttributes,
+        ...exports.otherAnimationAttributes,
+    ]),
+    mpath: new Set(['href']),
+    // Gradients
+    linearGradient: new Set([...exports.commonGradientAttributes]),
+    radialGradient: new Set([...exports.commonGradientAttributes]),
+    // Filters
+    feSpotLight: new Set([
+        'x',
+        'y',
+        'z',
+        'pointsAtX',
+        'pointsAtY',
+        'pointsAtZ',
+        'specularExponent',
+        'limitingConeAngle',
+    ]),
+    feBlend: new Set(['in', 'in2', 'mode']),
+    feColorMatrix: new Set(['in', 'type', 'values']),
+    feComponentTransfer: new Set(['in']),
+    feComposite: new Set(['in', 'in2', 'operator', 'k1', 'k2', 'k3', 'k4']),
+    feConvolveMatrix: new Set([
+        'in',
+        'order',
+        'kernelMatrix',
+        'divisor',
+        'bias',
+        'targetX',
+        'targetY',
+        'edgeMode',
+        'kernelUnitLength',
+        'preserveAlpha',
+    ]),
+    feDiffuseLighting: new Set([
+        'in',
+        'surfaceScale',
+        'diffuseConstant',
+        'kernelUnitLength',
+    ]),
+    feDisplacementMap: new Set([
+        'in',
+        'in2',
+        'scale',
+        'xChannelSelector',
+        'yChannelSelector',
+    ]),
+    feDistantLight: new Set(['azimuth', 'elevation']),
+    feDropShadow: new Set(['dx', 'dy', 'stdDeviation']),
+    feGaussianBlur: new Set(['in', 'stdDeviation', 'edgeMode']),
+    feFuncA: exports.feFuncAttributes,
+    feFuncR: exports.feFuncAttributes,
+    feFuncG: exports.feFuncAttributes,
+    feFuncB: exports.feFuncAttributes,
+    feMergeNode: new Set(['in']),
+    feMorphology: new Set(['in', 'operator', 'radius']),
+    feOffset: new Set(['in', 'dx', 'dy']),
+    fePointLight: new Set(['x', 'y', 'z']),
+    feSpecularLighting: new Set([
+        'in',
+        'surfaceScale',
+        'specularConstant',
+        'specularExponent',
+        'kernelUnitLength',
+    ]),
+    feTile: new Set(['in']),
+    feTurbulence: new Set([
+        'baseFrequency',
+        'numOctaves',
+        'seed',
+        'stitchTiles',
+        'type',
+    ]),
+};