@cyberalien/svg-utils 1.2.0 → 1.2.1

package/lib/svg-css/icon-set/add.js

@@ -1,5 +1,6 @@
 import { stringifyCSSAnimationFrames, stringifyCSSRules } from "../../css/stringify.js";
 import { minifyCSS } from "../../css/minify.js";
+import { expandSVGCSSIconSetFallback } from "./minify/expand.js";
 
 function minifyRules(value) {
 	return (value ? minifyCSS(typeof value === "string" ? value : stringifyCSSRules(value)) : void 0) || void 0;
@@ -15,12 +16,19 @@ function stringifyObject(data) {
 * Add icon to an icon set
 */
 function addIconToSVGCSSIconSet(iconSet, iconName, icon) {
-	iconSet.icons[iconName] = {
+	const iconData = {
 		content: icon.content,
-		fallback: icon.fallback,
 		states: icon.states,
 		viewBox: icon.viewBox
 	};
+	let fallback = icon.fallback;
+	if (fallback) {
+		const fallbackPrefix = iconSet.fallbackPrefix ?? "";
+		if (fallbackPrefix) if (fallback.startsWith(fallbackPrefix)) fallback = fallback.slice(fallbackPrefix.length);
+		else expandSVGCSSIconSetFallback(iconSet);
+		iconData.fallback = fallback;
+	}
+	iconSet.icons[iconName] = iconData;
 	const { classes, animations, statefulClasses, keyframes } = icon;
 	const classNames = new Set([...Object.keys(classes || {}), ...Object.keys(statefulClasses || {})]);
 	for (const className of classNames) if (!iconSet.classes?.[className]) {

package/lib/svg-css/icon-set/create.js

@@ -2,7 +2,10 @@
 * Create an empty icon set
 */
 function createEmptySVGCSSIconSet() {
-	return { icons: Object.create(null) };
+	return {
+		version: 1,
+		icons: Object.create(null)
+	};
 }
 
 export { createEmptySVGCSSIconSet };

package/lib/svg-css/icon-set/get.js

@@ -6,7 +6,7 @@ function getSVGCSSIconFromIconSet(iconSet, name) {
 	const fullName = iconSet.aliases?.[name] || name;
 	const data = iconSet.icons[fullName];
 	if (!data) return;
-	const { viewBoxes, css, fallbackPrefix = "", fallbackSuffix = "" } = iconSet;
+	const { viewBoxes, css, fallbackPrefix = "" } = iconSet;
 	let viewBox = data.viewBox;
 	if (typeof viewBox === "number") viewBox = viewBoxes?.[viewBox];
 	if (!viewBox) return;
@@ -67,7 +67,7 @@ function getSVGCSSIconFromIconSet(iconSet, name) {
 		content,
 		viewBox,
 		states,
-		fallback: typeof data.fallback === "string" ? `${fallbackPrefix}${data.fallback}${fallbackSuffix}` : void 0
+		fallback: typeof data.fallback === "string" ? `${fallbackPrefix}${data.fallback}` : void 0
 	};
 	let _key;
 	for (_key in classes) {

package/lib/svg-css/icon-set/minify/expand.d.ts

@@ -3,8 +3,12 @@ import { SVGCSSIconSet, SVGCSSIconSetClassData } from "../types.js";
  * Expand class content from icon set
  */
 declare function expandSVGCSSIconSetClass(css: Required<SVGCSSIconSet>['css'], classContent: SVGCSSIconSetClassData): void;
+/**
+ * Expand fallback prefix
+ */
+declare function expandSVGCSSIconSetFallback(iconSet: SVGCSSIconSet): void;
 /**
  * Unminify icon set
  */
 declare function expandSVGCSSIconSet(iconSet: SVGCSSIconSet): void;
-export { expandSVGCSSIconSet, expandSVGCSSIconSetClass };
+export { expandSVGCSSIconSet, expandSVGCSSIconSetClass, expandSVGCSSIconSetFallback };

package/lib/svg-css/icon-set/minify/expand.js

@@ -13,10 +13,25 @@ function expandSVGCSSIconSetClass(css, classContent) {
 	}
 }
 /**
+* Expand fallback prefix
+*/
+function expandSVGCSSIconSetFallback(iconSet) {
+	const fallbackPrefix = iconSet.fallbackPrefix ?? "";
+	if (fallbackPrefix) {
+		delete iconSet.fallbackPrefix;
+		for (const iconName in iconSet.icons) {
+			const icon = iconSet.icons[iconName];
+			const fallback = icon.fallback;
+			if (fallback) icon.fallback = fallbackPrefix + fallback;
+		}
+	}
+}
+/**
 * Unminify icon set
 */
 function expandSVGCSSIconSet(iconSet) {
 	const { viewBoxes, statesList, css } = iconSet;
+	expandSVGCSSIconSetFallback(iconSet);
 	if (viewBoxes || statesList) {
 		for (const iconName in iconSet.icons) {
 			const icon = iconSet.icons[iconName];
@@ -32,4 +47,4 @@ function expandSVGCSSIconSet(iconSet) {
 	}
 }
 
-export { expandSVGCSSIconSet, expandSVGCSSIconSetClass };
+export { expandSVGCSSIconSet, expandSVGCSSIconSetClass, expandSVGCSSIconSetFallback };

package/lib/svg-css/icon-set/minify/minify.js

@@ -42,6 +42,33 @@ function minifySVGCSSIconSet(iconSet) {
 			map.set(value, index);
 		});
 	}
+	if (!iconSet.fallbackPrefix) {
+		let commonPrefix;
+		for (const iconName in iconSet.icons) {
+			const fallback = iconSet.icons[iconName].fallback;
+			if (fallback) {
+				const parts = fallback.split(":");
+				if (parts.length !== 2) {
+					commonPrefix = null;
+					break;
+				}
+				const prefix = parts[0];
+				if (commonPrefix === void 0) commonPrefix = prefix;
+				else if (commonPrefix !== prefix) {
+					commonPrefix = null;
+					break;
+				}
+			}
+		}
+		if (commonPrefix) {
+			iconSet.fallbackPrefix = `${commonPrefix}:`;
+			for (const iconName in iconSet.icons) {
+				const icon = iconSet.icons[iconName];
+				const fallback = icon.fallback;
+				if (fallback) icon.fallback = fallback.slice(commonPrefix.length + 1);
+			}
+		}
+	}
 	for (const iconName in iconSet.icons) {
 		const icon = iconSet.icons[iconName];
 		const viewBoxValue = icon.viewBox;

package/lib/svg-css/icon-set/types.d.ts

@@ -35,8 +35,8 @@ interface SVGCSSIconSetSharedData {
  * Does not include metadata
  */
 interface SVGCSSIconSet extends SVGCSSIconSetSharedData {
+  version: 1;
   fallbackPrefix?: string;
-  fallbackSuffix?: string;
   icons: Record<string, SVGCSSIconSetIcon>;
   aliases?: Record<string, string>;
 }

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "Common functions for working with SVG used by various packages.",
   "author": "Vjacheslav Trushkin",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
   "bugs": "https://github.com/cyberalien/svg-utils/issues",
   "homepage": "https://cyberalien.dev/",