@iconify/tools 4.2.0 → 5.0.0-beta.1

package/lib/optimise/flags.js

@@ -0,0 +1,231 @@
+import { parseSVG } from "../svg/parse.js";
+
+/**
+* Command constants
+*/
+const CLOSE_PATH = 1;
+const MOVE_TO = 2;
+const HORIZ_LINE_TO = 4;
+const VERT_LINE_TO = 8;
+const LINE_TO = 16;
+const CURVE_TO = 32;
+const SMOOTH_CURVE_TO = 64;
+const QUAD_TO = 128;
+const SMOOTH_QUAD_TO = 256;
+const ARC = 512;
+/**
+* Number of arguments for each command
+*/
+const argCount = {
+	[MOVE_TO]: 2,
+	[LINE_TO]: 2,
+	[HORIZ_LINE_TO]: 1,
+	[VERT_LINE_TO]: 1,
+	[CLOSE_PATH]: 0,
+	[QUAD_TO]: 4,
+	[SMOOTH_QUAD_TO]: 2,
+	[CURVE_TO]: 6,
+	[SMOOTH_CURVE_TO]: 4,
+	[ARC]: 7
+};
+/**
+* Check if character is a digit
+*/
+const isDigit = (num) => num >= 48 && num <= 57;
+/**
+* Check if character is white space
+*/
+const isWhiteSpace = (num) => num === 32 || num === 9 || num === 13 || num === 10;
+/**
+* Clean up path
+*
+* @param {string} path
+* @return {string}
+*/
+function cleanPath(path) {
+	const commands = [];
+	const length = path.length;
+	let currentNumber = "";
+	let currentNumberHasExp = false;
+	let currentNumberHasExpDigits = false;
+	let currentNumberHasDecimal = false;
+	let canParseCommandOrComma = true;
+	let currentCommand = null;
+	let currentCommandType = null;
+	let currentArgs = [];
+	let i = 0;
+	const finishCommand = () => {
+		if (currentCommand !== null) {
+			commands.push({
+				command: currentCommand,
+				params: currentArgs.slice(0)
+			});
+			currentArgs = [];
+			canParseCommandOrComma = true;
+			switch (currentCommand) {
+				case "M":
+					currentCommand = "L";
+					break;
+				case "m":
+					currentCommand = "l";
+					break;
+			}
+		}
+	};
+	const parseNumber = () => {
+		if (currentNumber !== "" && currentCommandType) {
+			let value = Number(currentNumber);
+			if (isNaN(value)) throw new Error(`Invalid number "${currentNumber}" at ${i}`);
+			if (currentCommandType === ARC) {
+				if (currentArgs.length < 2 && value <= 0) throw new Error(`Expected positive number, got "${value}" at ${i}`);
+				while (true) {
+					if (currentArgs.length < 3 || currentArgs.length > 4) break;
+					if (currentNumber === "0" || currentNumber === "1") break;
+					const slice = currentNumber.slice(0, 1);
+					const newNumber = currentNumber.slice(1);
+					const newValue = Number(newNumber);
+					if (slice === "0" || slice === "1") {
+						if (isNaN(newValue)) throw new Error(`Invalid number "${currentNumber}" at ${i}`);
+						currentArgs.push(slice);
+						currentNumber = newNumber;
+						value = newValue;
+						continue;
+					}
+					throw new Error(`Expected a flag, got "${currentNumber}" at ${i}`);
+				}
+			}
+			currentArgs.push(currentNumber);
+			if (currentArgs.length === argCount[currentCommandType]) finishCommand();
+			currentNumber = "";
+			currentNumberHasExpDigits = false;
+			currentNumberHasExp = false;
+			currentNumberHasDecimal = false;
+			canParseCommandOrComma = true;
+		}
+	};
+	for (i = 0; i < length; i++) {
+		const char = path[i];
+		const num = char.charCodeAt(0);
+		if (isDigit(num)) {
+			currentNumber += char;
+			currentNumberHasExpDigits = currentNumberHasExp;
+			continue;
+		}
+		if (char === "e" || char === "E") {
+			currentNumber += char;
+			currentNumberHasExp = true;
+			continue;
+		}
+		if ((char === "-" || char === "+") && currentNumberHasExp && !currentNumberHasExpDigits) {
+			currentNumber += char;
+			continue;
+		}
+		if (char === "." && !currentNumberHasExp && !currentNumberHasDecimal) {
+			currentNumber += char;
+			currentNumberHasDecimal = true;
+			continue;
+		}
+		parseNumber();
+		if (isWhiteSpace(num)) continue;
+		if (canParseCommandOrComma && char === ",") {
+			canParseCommandOrComma = false;
+			continue;
+		}
+		if (char === "+" || char === "-" || char === ".") {
+			currentNumber = char;
+			currentNumberHasDecimal = char === ".";
+			continue;
+		}
+		if (currentArgs.length > 0) throw new Error(`Unexpected command at ${i}`);
+		if (!canParseCommandOrComma) throw new Error(`Command cannot follow comma at ${i}`);
+		canParseCommandOrComma = false;
+		currentCommand = char;
+		switch (char) {
+			case "z":
+			case "Z":
+				commands.push({
+					command: char,
+					params: []
+				});
+				canParseCommandOrComma = true;
+				currentCommandType = null;
+				currentCommand = null;
+				break;
+			case "h":
+			case "H":
+				currentCommandType = HORIZ_LINE_TO;
+				break;
+			case "v":
+			case "V":
+				currentCommandType = VERT_LINE_TO;
+				break;
+			case "m":
+			case "M":
+				currentCommandType = MOVE_TO;
+				break;
+			case "l":
+			case "L":
+				currentCommandType = LINE_TO;
+				break;
+			case "c":
+			case "C":
+				currentCommandType = CURVE_TO;
+				break;
+			case "s":
+			case "S":
+				currentCommandType = SMOOTH_CURVE_TO;
+				break;
+			case "q":
+			case "Q":
+				currentCommandType = QUAD_TO;
+				break;
+			case "t":
+			case "T":
+				currentCommandType = SMOOTH_QUAD_TO;
+				break;
+			case "a":
+			case "A":
+				currentCommandType = ARC;
+				break;
+			default: throw new Error(`Unexpected character "${char}" at ${i}`);
+		}
+	}
+	parseNumber();
+	if (currentArgs.length) {
+		if (!currentCommandType) throw new Error("Empty path");
+		if (currentArgs.length !== argCount[currentCommandType]) throw new Error(`Unexpected end of path at ${i}`);
+		finishCommand();
+	}
+	let output = "";
+	commands.forEach((item) => {
+		output += item.command;
+		item.params.forEach((value, index) => {
+			if (index > 0) switch (value[0]) {
+				case "-":
+				case "+": break;
+				case ".":
+					if (index < 1) break;
+					if (item.params[index - 1].includes(".")) break;
+				default: output += " ";
+			}
+			output += value;
+		});
+	});
+	return output;
+}
+/**
+* De-optimise paths. Compressed paths are still not supported by some software.
+*/
+function deOptimisePaths(svg) {
+	parseSVG(svg, (item) => {
+		const node = item.node;
+		if (node.tag !== "path") return;
+		const d = node.attribs.d;
+		if (typeof d === "string") try {
+			const optimised = cleanPath(d);
+			if (optimised !== d) node.attribs.d = optimised;
+		} catch {}
+	});
+}
+
+export { deOptimisePaths };

package/lib/optimise/global-style.d.ts

@@ -1,11 +1,6 @@
-import { SVG } from '../svg/index.js';
-import 'cheerio';
-import '@iconify/types';
-import '@iconify/utils/lib/customisations/defaults';
-
+import { SVG } from "../svg/index.js";
 /**
  * Expand global style
  */
 declare function cleanupGlobalStyle(svg: SVG): void;
-
-export { cleanupGlobalStyle };
+export { cleanupGlobalStyle };

package/lib/optimise/global-style.js

@@ -0,0 +1,114 @@
+import { parseSVG } from "../svg/parse.js";
+import { parseSVGStyle } from "../svg/parse-style.js";
+import { allValidTags, animateTags } from "../svg/data/tags.js";
+import { splitClassName } from "@cyberalien/svg-utils";
+
+const tempDataAttrbiute = "data-gstyle-temp";
+/**
+* Expand global style
+*/
+function cleanupGlobalStyle(svg) {
+	const backup = svg.toString();
+	let containsTempAttr = false;
+	const animatedClasses = /* @__PURE__ */ new Set();
+	parseSVG(svg, (item) => {
+		const node = item.node;
+		const attribs = node.attribs;
+		const tagName = node.tag;
+		if (!animateTags.has(tagName)) return;
+		if (attribs["attributeName"] !== "class") return;
+		[
+			"from",
+			"to",
+			"values"
+		].forEach((attr) => {
+			const value = attribs[attr];
+			if (typeof value !== "string") return;
+			value.split(";").forEach((item$1) => {
+				splitClassName(item$1).forEach((className) => {
+					animatedClasses.add(className);
+				});
+			});
+		});
+	});
+	const removeClasses = /* @__PURE__ */ new Set();
+	try {
+		parseSVGStyle(svg, (styleItem) => {
+			const returnValue = styleItem.value;
+			if (styleItem.type !== "global") return returnValue;
+			const selectorTokens = styleItem.selectorTokens;
+			for (let i = 0; i < selectorTokens.length; i++) if (selectorTokens[i].type !== "selector") return returnValue;
+			const selectors = styleItem.selectors;
+			const matches = [];
+			for (let i = 0; i < selectors.length; i++) {
+				const selector = styleItem.selectors[i];
+				const firstChar = selector.charAt(0);
+				let matchType;
+				if (firstChar === ".") matchType = "class";
+				else if (firstChar === "#") matchType = "id";
+				else if (allValidTags.has(selector)) matchType = "tag";
+				else return returnValue;
+				const valueMatch = matchType === "tag" ? selector : selector.slice(1);
+				if (matchType === "class" && animatedClasses.has(valueMatch)) return returnValue;
+				matches.push({
+					type: matchType,
+					value: valueMatch
+				});
+			}
+			const isMatch = (tagName, node) => {
+				const attribs = node.attribs;
+				for (let i = 0; i < matches.length; i++) {
+					const { type, value } = matches[i];
+					switch (type) {
+						case "id":
+							if (attribs.id === value) return true;
+							break;
+						case "tag":
+							if (tagName === value) return true;
+							break;
+						case "class": {
+							const className = attribs["class"];
+							if (typeof className === "string" && splitClassName(className).includes(value)) return true;
+						}
+					}
+				}
+				return false;
+			};
+			parseSVG(svg, (svgItem) => {
+				const node = svgItem.node;
+				const tagName = node.tag;
+				if (!isMatch(tagName, node)) return;
+				const attribs = node.attribs;
+				const tempDataValue = attribs[tempDataAttrbiute];
+				const addedAttributes = new Set(typeof tempDataValue === "string" ? splitClassName(tempDataValue) : []);
+				const prop = styleItem.prop;
+				if (attribs[prop] !== void 0) {
+					if (addedAttributes.has(prop)) throw new Error("Duplicate attribute");
+				}
+				attribs[prop] = styleItem.value;
+				addedAttributes.add(prop);
+				attribs[tempDataAttrbiute] = Array.from(addedAttributes).join(" ");
+				containsTempAttr = true;
+			});
+			matches.forEach((match) => {
+				if (match.type === "class") removeClasses.add(match.value);
+			});
+		});
+		parseSVG(svg, (svgItem) => {
+			const attribs = svgItem.node.attribs;
+			const className = attribs["class"];
+			const classList = typeof className === "string" ? splitClassName(className) : void 0;
+			if (!classList) return;
+			const filtered = classList.filter((item) => !removeClasses.has(item));
+			if (!filtered.length) delete attribs["class"];
+			else attribs["class"] = filtered.join(" ");
+		});
+		if (containsTempAttr) parseSVG(svg, (item) => {
+			delete item.node.attribs[tempDataAttrbiute];
+		});
+	} catch {
+		svg.load(backup);
+	}
+}
+
+export { cleanupGlobalStyle };

package/lib/optimise/mask.d.ts

@@ -1,18 +1,14 @@
-import { Color } from '@iconify/utils/lib/colors/types';
-import { SVG } from '../svg/index.js';
-import 'cheerio';
-import '@iconify/types';
-import '@iconify/utils/lib/customisations/defaults';
-
+import { SVG } from "../svg/index.js";
+import { Color } from "@iconify/utils/lib/colors/types";
 type ColorCallback = (value: string, color: Color | null) => boolean;
 type ColorCheck = string | string[] | ColorCallback;
 interface SVGToMaskOptions {
-    color?: string;
-    solid?: ColorCheck;
-    transparent?: ColorCheck;
-    custom?: (value: string, color: Color | null) => string | number | undefined;
-    force?: boolean;
-    id?: string;
+  color?: string;
+  solid?: ColorCheck;
+  transparent?: ColorCheck;
+  custom?: (value: string, color: Color | null) => string | number | undefined;
+  force?: boolean;
+  id?: string;
 }
 /**
  * Converts SVG to mask
@@ -20,5 +16,4 @@ interface SVGToMaskOptions {
  * Fixes badly designed icons, which use white shape where icon supposed to be transparent
  */
 declare function convertSVGToMask(svg: SVG, options?: SVGToMaskOptions): boolean;
-
-export { convertSVGToMask };
+export { convertSVGToMask };

package/lib/optimise/mask.js

@@ -0,0 +1,83 @@
+import { isEmptyColor, parseColors } from "../colors/parse.js";
+import { iconToHTML, parseSVGContent, splitSVGDefs } from "@iconify/utils";
+
+const defaultBlackColors = [
+	"black",
+	"#000",
+	"#000000"
+];
+const defaultWhiteColors = [
+	"white",
+	"#fff",
+	"#ffffff"
+];
+const defaultOptions = {
+	color: "currentColor",
+	solid: [...defaultBlackColors, "currentcolor"],
+	transparent: defaultWhiteColors,
+	force: false,
+	id: "mask"
+};
+/**
+* Converts SVG to mask
+*
+* Fixes badly designed icons, which use white shape where icon supposed to be transparent
+*/
+function convertSVGToMask(svg, options = {}) {
+	const props = {
+		...defaultOptions,
+		...options
+	};
+	const check = (test, value, color) => {
+		if (typeof test === "string") return value.toLowerCase() === test;
+		if (test instanceof Array) return test.includes(value.toLowerCase());
+		return test(value, color);
+	};
+	let foundSolid = false;
+	let foundTransparent = false;
+	let failed = false;
+	let hasCustomValue = false;
+	const backup = svg.toString();
+	parseColors(svg, { callback: (attr, colorStr, color) => {
+		if (!color || isEmptyColor(color)) return colorStr;
+		if (props.custom) {
+			let customValue = props.custom(colorStr.toLowerCase(), color);
+			if (typeof customValue === "number") {
+				let str = Math.max(Math.min(Math.round(customValue * 255), 255), 0).toString(16);
+				if (str.length < 2) str = "0" + str;
+				if (str[0] === str[1]) str = str[0];
+				customValue = "#" + str + str + str;
+			}
+			if (typeof customValue === "string") {
+				if (defaultBlackColors.includes(customValue)) foundSolid = true;
+				else if (defaultWhiteColors.includes(customValue)) foundTransparent = true;
+				else hasCustomValue = true;
+				return customValue;
+			}
+		}
+		if (check(props.solid, colorStr, color)) {
+			foundSolid = true;
+			return "#fff";
+		}
+		if (check(props.transparent, colorStr, color)) {
+			foundTransparent = true;
+			return "#000";
+		}
+		failed = true;
+		console.warn("Unexpected color:", colorStr);
+		return color;
+	} });
+	if (failed || !(hasCustomValue || foundSolid && foundTransparent) && !props.force) {
+		svg.load(backup);
+		return false;
+	}
+	const parsed = parseSVGContent(svg.toString());
+	if (!parsed) return false;
+	const { defs, content } = splitSVGDefs(parsed.body);
+	const viewBox = svg.viewBox;
+	const newContent = iconToHTML(`<defs>${defs}<mask id="${props.id}">${content}</mask></defs><rect mask="url(#${props.id})" ${viewBox.left ? `x="${viewBox.left}" ` : ""}${viewBox.top ? `y="${viewBox.top}" ` : ""}width="${viewBox.width}" height="${viewBox.height}" fill="${props.color}" />`, parsed.attribs);
+	svg.load(newContent);
+	return true;
+}
+
+export { convertSVGToMask };

package/lib/optimise/origin.d.ts

@@ -1,11 +1,6 @@
-import { SVG } from '../svg/index.js';
-import 'cheerio';
-import '@iconify/types';
-import '@iconify/utils/lib/customisations/defaults';
-
+import { SVG } from "../svg/index.js";
 /**
  * Reset origin to 0 0
  */
 declare function resetSVGOrigin(svg: SVG): void;
-
-export { resetSVGOrigin };
+export { resetSVGOrigin };

package/lib/optimise/origin.js

@@ -0,0 +1,22 @@
+import { runSVGO } from "./svgo.js";
+
+/**
+* Reset origin to 0 0
+*/
+function resetSVGOrigin(svg) {
+	const viewBox = svg.viewBox;
+	const left = viewBox.left ?? 0;
+	const top = viewBox.top ?? 0;
+	if (left || top) {
+		const content = `<svg width="${viewBox.width}" height="${viewBox.height}" viewBox="0 0 ${viewBox.width} ${viewBox.height}"><g transform="translate(${0 - left} ${0 - top})">${svg.getBody()}</g></svg>`;
+		svg.load(content);
+		runSVGO(svg, { plugins: [
+			"collapseGroups",
+			"convertTransform",
+			"convertPathData",
+			"sortAttrs"
+		] });
+	}
+}
+
+export { resetSVGOrigin };

package/lib/optimise/scale.d.ts

@@ -1,11 +1,6 @@
-import { SVG } from '../svg/index.js';
-import 'cheerio';
-import '@iconify/types';
-import '@iconify/utils/lib/customisations/defaults';
-
+import { SVG } from "../svg/index.js";
 /**
  * Scale icon
  */
 declare function scaleSVG(svg: SVG, scale: number): void;
-
-export { scaleSVG };
+export { scaleSVG };

package/lib/optimise/scale.js

@@ -0,0 +1,24 @@
+import { runSVGO } from "./svgo.js";
+import { resetSVGOrigin } from "./origin.js";
+
+/**
+* Scale icon
+*/
+function scaleSVG(svg, scale) {
+	resetSVGOrigin(svg);
+	if (scale !== 1) {
+		const viewBox = svg.viewBox;
+		const width = viewBox.width * scale;
+		const height = viewBox.height * scale;
+		const content = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><g transform="scale(${scale})">${svg.getBody()}</g></svg>`;
+		svg.load(content);
+		runSVGO(svg, { plugins: [
+			"collapseGroups",
+			"convertTransform",
+			"convertPathData",
+			"sortAttrs"
+		] });
+	}
+}
+
+export { scaleSVG };

package/lib/optimise/svgo.d.ts

@@ -1,15 +1,11 @@
-import { PluginConfig } from 'svgo';
-import { SVG } from '../svg/index.js';
-import 'cheerio';
-import '@iconify/types';
-import '@iconify/utils/lib/customisations/defaults';
-
+import { SVG } from "../svg/index.js";
+import { PluginConfig } from "svgo";
 interface CleanupIDsOption {
-    cleanupIDs?: string | ((id: string) => string) | false;
+  cleanupIDs?: string | ((id: string) => string) | false;
 }
 interface GetSVGOPluginOptions extends CleanupIDsOption {
-    animated?: boolean;
-    keepShapes?: boolean;
+  animated?: boolean;
+  keepShapes?: boolean;
 }
 /**
  * Get list of plugins
@@ -19,19 +15,18 @@ declare function getSVGOPlugins(options: GetSVGOPluginOptions): PluginConfig[];
  * Options
  */
 interface SVGOCommonOptions {
-    multipass?: boolean;
+  multipass?: boolean;
 }
 interface SVGOOptionsWithPlugin extends SVGOCommonOptions {
-    plugins: PluginConfig[];
+  plugins: PluginConfig[];
 }
 interface SVGOptionsWithoutPlugin extends SVGOCommonOptions, CleanupIDsOption {
-    plugins?: undefined;
-    keepShapes?: boolean;
+  plugins?: undefined;
+  keepShapes?: boolean;
 }
 type SVGOOptions = SVGOOptionsWithPlugin | SVGOptionsWithoutPlugin;
 /**
  * Run SVGO on icon
  */
 declare function runSVGO(svg: SVG, options?: SVGOOptions): void;
-
-export { getSVGOPlugins, runSVGO };
+export { getSVGOPlugins, runSVGO };

package/lib/optimise/svgo.js

@@ -0,0 +1,90 @@
+import { parseXMLContent, stringifyXMLContent } from "@cyberalien/svg-utils";
+import { optimize } from "svgo";
+import { changeSVGIDs } from "@cyberalien/svg-utils/lib/svg/ids/change.js";
+
+/**
+* Get list of plugins
+*/
+function getSVGOPlugins(options) {
+	return [
+		"cleanupAttrs",
+		"mergeStyles",
+		"inlineStyles",
+		"removeComments",
+		"removeUselessDefs",
+		"removeEditorsNSData",
+		"removeEmptyAttrs",
+		"removeEmptyContainers",
+		"convertStyleToAttrs",
+		"convertColors",
+		"convertTransform",
+		"removeUnknownsAndDefaults",
+		"removeNonInheritableGroupAttrs",
+		"removeUnusedNS",
+		"cleanupNumericValues",
+		"cleanupListOfValues",
+		"moveElemsAttrsToGroup",
+		"moveGroupAttrsToElems",
+		"collapseGroups",
+		"sortDefsChildren",
+		"sortAttrs",
+		...options.animated ? [] : ["removeUselessStrokeAndFill"],
+		...options.animated || options.keepShapes ? [] : [
+			"removeHiddenElems",
+			"convertShapeToPath",
+			"convertEllipseToCircle",
+			{
+				name: "convertPathData",
+				params: { noSpaceAfterFlags: true }
+			},
+			{
+				name: "mergePaths",
+				params: { noSpaceAfterFlags: true }
+			},
+			"reusePaths"
+		],
+		...!options.animated && options.cleanupIDs !== false ? ["cleanupIds"] : []
+	];
+}
+/**
+* Run SVGO on icon
+*/
+function runSVGO(svg, options = {}) {
+	const code = svg.toString();
+	const multipass = options.multipass !== false;
+	let plugins;
+	if (options.plugins) plugins = options.plugins;
+	else {
+		const animated = code.includes("<animate") || code.includes("<set");
+		plugins = getSVGOPlugins({
+			...options,
+			animated
+		});
+		if (code.includes("filter=") && code.includes("transform=")) plugins = plugins.filter((item) => item !== "moveElemsAttrsToGroup");
+	}
+	const result = optimize(code, {
+		plugins,
+		multipass
+	});
+	if (typeof result.error === "string") throw new Error(result.error);
+	let content = result.data.replace(/<defs\/>/g, "");
+	if (!options.plugins) {
+		const prefix = options.cleanupIDs !== void 0 ? options.cleanupIDs : "svgID";
+		if (prefix !== false) {
+			let counter = 0;
+			const xml = parseXMLContent(content);
+			if (xml) {
+				changeSVGIDs(xml, () => prefix + (counter++).toString(36));
+				const newContent = stringifyXMLContent(xml);
+				if (newContent) content = newContent;
+			}
+		}
+	}
+	if (!options.plugins || options.plugins.find((item) => {
+		if (typeof item === "string") return item === "reusePaths";
+		return item.name === "reusePaths";
+	})) content = content.replace(" xmlns:xlink=\"http://www.w3.org/1999/xlink\"", "").replaceAll("xlink:href=", "href=");
+	svg.load(content);
+}
+
+export { getSVGOPlugins, runSVGO };