@iconify/tools 4.2.0 → 5.0.0-beta.2

package/lib/optimise/figma.js

@@ -0,0 +1,189 @@
+import { parseSVG } from "../svg/parse.js";
+import { defsTag, maskTags, symbolTag } from "../svg/data/tags.js";
+import { cleanupInlineStyle } from "../svg/cleanup/inline-style.js";
+import { unwrapEmptyGroup } from "./unwrap.js";
+import { colorToString, stringToColor } from "@iconify/utils";
+
+/**
+* Checks if number is tiny, used to remove bad Figma transformations
+*/
+function isTinyNumber(value, limit) {
+	const num = parseInt(value);
+	return !isNaN(num) && Math.abs(num) < limit;
+}
+/**
+* Check node
+*
+* Returns CheckClipPathResult on success, false on error
+*/
+function checkClipPathNode(clipNode, expectedWidth, expectedHeight) {
+	for (const attr in clipNode.attribs) if (attr !== "id") return false;
+	const children = clipNode.children.filter((node) => node.type !== "text");
+	if (children.length !== 1) return false;
+	const childNode = children[0];
+	if (childNode.type !== "tag" || childNode.children.length) return false;
+	const attribs = { ...childNode.attribs };
+	delete attribs["fill"];
+	const fill = childNode.attribs["fill"];
+	const colorValue = typeof fill === "string" ? stringToColor(fill) : null;
+	const colorString = colorValue ? colorToString(colorValue) : null;
+	if (fill && colorString !== "#fff") {
+		console.warn("Unxepected fill on clip path:", childNode.attribs["fill"]);
+		return false;
+	}
+	switch (childNode.tag) {
+		case "rect": {
+			const widthValue = attribs["width"];
+			const heightValue = attribs["height"];
+			if ((typeof widthValue === "string" ? parseInt(widthValue) : widthValue) !== expectedWidth || (typeof heightValue === "string" ? parseInt(heightValue) : heightValue) !== expectedHeight) {
+				console.warn("Invalid size of clip path");
+				return false;
+			}
+			delete attribs["width"];
+			delete attribs["height"];
+			break;
+		}
+		default:
+			console.warn("Unexpected tag in Figma clip path:", childNode.tag);
+			return false;
+	}
+	Object.keys(attribs).forEach((attr) => {
+		const value = attribs[attr];
+		if (typeof value !== "string") return;
+		switch (attr) {
+			case "transform": if (value.startsWith("translate(") && value.endsWith(")")) {
+				const translateParts = value.slice(10, -1).split(/\s+/);
+				const limit = Math.min(expectedWidth, expectedHeight) / 1e3;
+				if (translateParts.length === 2 && isTinyNumber(translateParts[0], limit) && isTinyNumber(translateParts[1], limit)) delete attribs[attr];
+			}
+		}
+	});
+	return {
+		node: clipNode,
+		attribs
+	};
+}
+const urlStart = "url(#";
+const urlEnd = ")";
+/**
+* Does the job
+*
+* Can mess with SVG because on failure backup will be restored
+*/
+function remove(svg) {
+	unwrapEmptyGroup(svg);
+	let content = svg.toString();
+	const backup = content;
+	if (content.includes("frame-clip-def")) {
+		cleanupInlineStyle(svg);
+		parseSVG(svg, (item) => {
+			const node = item.node;
+			const tagName = node.tag;
+			const attribs$1 = node.attribs;
+			Object.keys(attribs$1).forEach((attr) => {
+				const value = attribs$1[attr];
+				if (typeof value !== "string") return;
+				switch (attr) {
+					case "id":
+						if (!maskTags.has(tagName) && !symbolTag.has(tagName)) delete attribs$1[attr];
+						break;
+					case "class":
+					case "xmlns:xlink":
+					case "version":
+						delete attribs$1[attr];
+						break;
+					case "transform": {
+						const trimmed = value.replace(/\s+/g, "").replace(/\.0+/g, "");
+						if (!trimmed || trimmed === "matrix(1,0,0,1,0,0)") delete attribs$1[attr];
+						break;
+					}
+					case "rx":
+					case "ry":
+					case "x":
+					case "y":
+						if (value === "0") delete attribs$1[attr];
+						break;
+					case "fill-opacity":
+					case "stroke-opacity":
+					case "opacity":
+						if (value === "1") delete attribs$1[attr];
+						break;
+					case "fill":
+					case "stroke": {
+						const colorValue = stringToColor(value);
+						if (colorValue?.type === "rgb") attribs$1[attr] = colorToString(colorValue);
+					}
+				}
+			});
+		});
+		content = svg.toString();
+	}
+	const clipPathBlocks = content.match(/<clipPath[^>]*>[\s\S]+?<\/clipPath>/g);
+	if (clipPathBlocks?.length === 2 && clipPathBlocks[0] === clipPathBlocks[1]) {
+		const split = clipPathBlocks[0];
+		const lines = content.split(split);
+		content = lines.shift() + split + lines.join("");
+	}
+	if (content.includes("<defs>")) content = content.replace(/<\/?defs>/g, "");
+	if (content !== backup) svg.load(content);
+	const rootNode = svg.$svg;
+	const children = rootNode.children.slice(0);
+	const shapesToClip = [];
+	let clipID;
+	for (let i = 0; i < children.length; i++) {
+		const node = children[i];
+		if (node.type === "tag") {
+			const tagName = node.tag;
+			if (!defsTag.has(tagName) && !maskTags.has(tagName) && !symbolTag.has(tagName)) {
+				const clipPath$1 = node.attribs["clip-path"];
+				if (typeof clipPath$1 !== "string" || !clipPath$1.startsWith(urlStart) || !clipPath$1.endsWith(urlEnd)) return false;
+				const id = clipPath$1.slice(5, -1);
+				if (typeof clipID === "string" && clipID !== id) return false;
+				clipID = id;
+				shapesToClip.push(node);
+			}
+		}
+	}
+	if (typeof clipID !== "string") return false;
+	const findClipPath = () => {
+		for (let i = 0; i < children.length; i++) {
+			const node = children[i];
+			if (node.type === "tag" && node.tag === "clipPath") {
+				if (node.attribs["id"] === clipID) {
+					const result = checkClipPathNode(node, svg.viewBox.width, svg.viewBox.height);
+					rootNode.children = rootNode.children.filter((n) => n !== node);
+					return result;
+				}
+				return;
+			}
+		}
+	};
+	const clipPath = findClipPath();
+	if (!clipPath) return false;
+	const attribs = clipPath.attribs;
+	for (let i = 0; i < shapesToClip.length; i++) {
+		const node = shapesToClip[i];
+		delete node.attribs["clip-path"];
+		for (const attr in attribs) {
+			if (node.attribs[attr] !== void 0) return false;
+			node.attribs[attr] = attribs[attr];
+		}
+	}
+	return true;
+}
+/**
+* Removes clip path from SVG, which Figma and Penpot add to icons that might have overflowing elements.
+* Also removes mess generated by Penpot
+*
+* Function was originally designed for Figma only, but later added support for Penpot
+*/
+function removeFigmaClipPathFromSVG(svg) {
+	const backup = svg.toString();
+	try {
+		if (remove(svg)) return true;
+	} catch {}
+	svg.load(backup);
+	return false;
+}
+
+export { removeFigmaClipPathFromSVG };

package/lib/optimise/flags.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";
 /**
  * De-optimise paths. Compressed paths are still not supported by some software.
  */
 declare function deOptimisePaths(svg: SVG): void;
-
-export { deOptimisePaths };
+export { deOptimisePaths };

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 };