@cyberalien/svg-utils 1.2.7 → 1.2.8

package/lib/components/helpers/css/generate.d.ts

@@ -3,7 +3,7 @@ import { GeneratedAssetFile } from "../../types/component.js";
 import { ComponentFactorySource } from "../../types/source.js";
 import { ComponentFactoryOptions } from "../../types/options.js";
 import { FactoryComponentImports } from "../imports/types.js";
-interface Options extends Pick<ComponentFactoryOptions, 'cssMode' | 'cssPath' | 'doubleDirsForCSS' | 'mergeCSS'> {
+interface Options extends Pick<ComponentFactoryOptions, 'cssMode' | 'cssPath' | 'doubleDirsForCSS' | 'mergeCSS' | 'staticState'> {
   componentType?: 'svelte';
 }
 /**

package/lib/components/jsx.js

@@ -59,8 +59,8 @@ function createJSXComponent(data, options) {
 	};
 	let computedFallback = false;
 	if (statefulData) {
-		const { supportedStates, allStates } = statefulData;
-		if (supportedStates.size) {
+		const { supportedStates, allStates, staticClassname } = statefulData;
+		if (supportedStates.size || staticClassname) {
 			const computedStates = [];
 			const computedStateNames = [];
 			let addedStateFunc = false;
@@ -97,6 +97,16 @@ function createJSXComponent(data, options) {
 					}
 				}
 			}
+			if (staticClassname) {
+				const state = "static";
+				props[state] = {
+					type: "boolean",
+					value: state,
+					template: ""
+				};
+				computedStates.push(`'${state}': ${state}`);
+				computedStateNames.push(state);
+			}
 			if (computedStates.length) {
 				componentInternalCode.push(`const states = useMemo(() => ({ ${computedStates.join(", ")} }), [${computedStateNames.join(", ")}]);`);
 				if (hasFallback && statefulData.fallback) {

package/lib/components/prepare/states.js

@@ -34,12 +34,14 @@ function prepareComponentFactoryStatefulIcon(icon, options) {
 			supportedStateValues[stateName] = defaultValue;
 		}
 	}
+	const staticClassname = Object.keys(icon.animations ?? {}).length > 0 && options?.staticState !== false ? "state-static" : void 0;
 	const statefulData = {
 		allStates,
 		supportedStates,
 		defaultStateValues,
 		supportedStateValues,
-		context: createStatefulIconSelectorsContext(config, allStates)
+		staticClassname,
+		context: createStatefulIconSelectorsContext(config, allStates, staticClassname)
 	};
 	if (isStatefulFallback) {
 		let fallbackTemplate = parseIconFallbackTemplate(fallback, allStates);

package/lib/components/solid.js

@@ -44,8 +44,8 @@ function createSolidComponent(data, options) {
 	if (!fallback) props.xmlns = "http://www.w3.org/2000/svg";
 	let computedFallback = false;
 	if (statefulData) {
-		const { supportedStates, allStates } = statefulData;
-		if (supportedStates.size) {
+		const { supportedStates, allStates, staticClassname } = statefulData;
+		if (supportedStates.size || staticClassname) {
 			const computedStates = [];
 			let addedStateFunc = false;
 			for (const state of allStates) if (typeof state === "string") {
@@ -79,6 +79,15 @@ function createSolidComponent(data, options) {
 					}
 				}
 			}
+			if (staticClassname) {
+				const state = "static";
+				props[state] = {
+					type: "boolean",
+					value: state,
+					template: ""
+				};
+				computedStates.push(`'${state}': local['${state}']`);
+			}
 			if (computedStates.length) {
 				componentInternalCode.push(`const states = createMemo(() => ({ ${computedStates.join(", ")} }));`);
 				if (fallback && statefulData.fallback) {

package/lib/components/svelte.js

@@ -44,8 +44,8 @@ function createSvelteComponent(data, options) {
 	if (!fallback) props.xmlns = "http://www.w3.org/2000/svg";
 	let computedFallback = false;
 	if (statefulData) {
-		const { supportedStates, allStates } = statefulData;
-		if (supportedStates.size) {
+		const { supportedStates, allStates, staticClassname } = statefulData;
+		if (supportedStates.size || staticClassname) {
 			const computedStates = [];
 			let addedStateFunc = false;
 			for (const state of allStates) if (typeof state === "string") {
@@ -79,6 +79,15 @@ function createSvelteComponent(data, options) {
 					}
 				}
 			}
+			if (staticClassname) {
+				const state = "static";
+				props[state] = {
+					type: "boolean",
+					value: state,
+					template: ""
+				};
+				computedStates.push(`'${state}': ${state}`);
+			}
 			if (computedStates.length) {
 				componentCode.push(`let states = $derived(({ ${computedStates.join(", ")} }));`);
 				if (fallback && statefulData.fallback) {

package/lib/components/types/options.d.ts

@@ -25,6 +25,7 @@ interface ComponentFactoryFileSystemOptions {
  */
 interface ComponentFactoryStatefulIconRenderingOptions {
   stateSelectors?: StatefulIconSelectorsConfig;
+  staticState?: boolean;
 }
 /**
  * Rendering options for component factory

package/lib/components/types/source.d.ts

@@ -10,6 +10,7 @@ interface StatefulComponentFactorySource {
   fallback?: IconFallbackTemplate;
   allStates: IconStatesList;
   supportedStates: Set<string>;
+  staticClassname?: string;
   defaultStateValues: Record<string, string | boolean>;
   supportedStateValues: Record<string, string | boolean>;
   context: StatefulIconSelectorsContext;

package/lib/components/vue-func.js

@@ -42,8 +42,8 @@ function createVueFunctionalComponent(data, options) {
 	if (!fallback) props.xmlns = "http://www.w3.org/2000/svg";
 	let computedFallback = false;
 	if (statefulData) {
-		const { supportedStates, allStates } = statefulData;
-		if (supportedStates.size) {
+		const { supportedStates, allStates, staticClassname } = statefulData;
+		if (supportedStates.size || staticClassname) {
 			const computedStates = [];
 			let addedStateFunc = false;
 			for (const state of allStates) if (typeof state === "string") {
@@ -77,6 +77,15 @@ function createVueFunctionalComponent(data, options) {
 					}
 				}
 			}
+			if (staticClassname) {
+				const state = "static";
+				props[state] = {
+					type: "boolean",
+					value: state,
+					template: ""
+				};
+				computedStates.push(`'${state}': props['${state}']`);
+			}
 			if (computedStates.length) {
 				componentCode.push(`const states = computed(() => ({ ${computedStates.join(", ")} }));`);
 				if (fallback && statefulData.fallback) {

package/lib/components/vue.js

@@ -43,8 +43,8 @@ function createVueComponent(data, options) {
 	if (!fallback) props.xmlns = "http://www.w3.org/2000/svg";
 	let computedFallback = false;
 	if (statefulData) {
-		const { supportedStates, allStates } = statefulData;
-		if (supportedStates.size) {
+		const { supportedStates, allStates, staticClassname } = statefulData;
+		if (supportedStates.size || staticClassname) {
 			const computedStates = [];
 			let addedStateFunc = false;
 			for (const state of allStates) if (typeof state === "string") {
@@ -78,6 +78,15 @@ function createVueComponent(data, options) {
 					}
 				}
 			}
+			if (staticClassname) {
+				const state = "static";
+				props[state] = {
+					type: "boolean",
+					value: state,
+					template: ""
+				};
+				computedStates.push(`'${state}': props['${state}']`);
+			}
 			if (computedStates.length) {
 				componentCode.push(`const states = computed(() => ({ ${computedStates.join(", ")} }));`);
 				if (fallback && statefulData.fallback) {

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

@@ -18,7 +18,11 @@ function renderStatefulSVGCSSIconStyle(icon, context, commonStylesheet = createE
 		return stylesheets[className];
 	};
 	for (const className in icon.classes) addGeneratedSelector(getStylesheet(className), [`.${className}`], icon.classes[className]);
-	for (const className in icon.animations) addGeneratedSelector(getStylesheet(className), [prefersReduceMotion, `.${className}`], icon.animations[className]);
+	for (const className in icon.animations) {
+		const tree = [prefersReduceMotion];
+		if (context?.staticClassname) tree.push(`svg:not(.${context.staticClassname})`);
+		addGeneratedSelector(getStylesheet(className), [...tree, `.${className}`], icon.animations[className]);
+	}
 	for (const keyframeName in icon.keyframes) getStylesheet(keyframeName).keyframes[keyframeName] = icon.keyframes[keyframeName];
 	if (context) for (const className in icon.statefulClasses) {
 		const baseClassName = `.${className}`;

package/lib/svg-css/states/selector/parse.d.ts

@@ -3,7 +3,7 @@ import { StatefulIconSelectorsConfig, StatefulIconSelectorsContext } from "./typ
 /**
  * Create context object from config
  */
-declare function createStatefulIconSelectorsContext(config: StatefulIconSelectorsConfig, states: IconStatesList): StatefulIconSelectorsContext;
+declare function createStatefulIconSelectorsContext(config: StatefulIconSelectorsConfig, states: IconStatesList, staticClassname?: string): StatefulIconSelectorsContext;
 /**
  * Get selectors to render state values
  *

package/lib/svg-css/states/selector/parse.js

@@ -5,10 +5,11 @@ import { stringifySelectorsForState } from "./stringify.js";
 /**
 * Create context object from config
 */
-function createStatefulIconSelectorsContext(config, states) {
+function createStatefulIconSelectorsContext(config, states, staticClassname) {
 	return {
 		config,
 		states,
+		staticClassname,
 		data: Object.create(null),
 		parsed: Object.create(null)
 	};

package/lib/svg-css/states/selector/types.d.ts

@@ -31,6 +31,7 @@ type StatefulIconSelectorsConfig = Record<string, string | StateSelectorData | R
 interface StatefulIconSelectorsContext {
   config: StatefulIconSelectorsConfig;
   states: IconStatesList;
+  staticClassname?: string;
   data: Record<string, StateSelectorData | null>;
   parsed: Record<string, string[][] | null>;
 }

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.7",
+  "version": "1.2.8",
   "license": "MIT",
   "bugs": "https://github.com/cyberalien/svg-utils/issues",
   "homepage": "https://cyberalien.dev/",
@@ -23,21 +23,16 @@
     "@iconify/types": "^2.0.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.3.5",
-    "@eslint/js": "^10.0.1",
     "@iconify-json/ri": "^1.2.10",
     "@types/jest": "^30.0.0",
     "@types/node": "^25.5.0",
-    "@typescript-eslint/eslint-plugin": "^8.57.1",
-    "@typescript-eslint/parser": "^8.57.1",
-    "eslint": "^10.0.3",
-    "globals": "^17.4.0",
+    "oxlint": "^1.56.0",
     "tsdown": "^0.21.4",
     "typescript": "^5.9.3",
     "vitest": "^4.1.0"
   },
   "scripts": {
-    "lint": "eslint --fix src/**/*.ts && tsc --noemit",
+    "lint": "oxlint --fix src/**/*.ts && tsc --noemit",
     "prebuild": "pnpm run lint",
     "build": "tsdown",
     "test": "vitest"

package/lib/svg-css/states/focus.d.ts

@@ -1,10 +0,0 @@
-import { IconStatesList, IconStatesState } from "./types.js";
-/**
- * Check for focus state
- */
-declare function isFocusState(state: IconStatesState | string): boolean;
-/**
- * Filter out focus state from states list
- */
-declare function filterFocusState(states: IconStatesList): IconStatesList;
-export { filterFocusState, isFocusState };

package/lib/svg-css/states/focus.js

@@ -1,13 +0,0 @@
-/**
-* Check for focus state
-*/
-function isFocusState(state) {
-	return state === "focus";
-}
-/**
-* Filter out focus state from states list
-*/
-function filterFocusState(states) {
-	return states.filter((state) => !isFocusState(state));
-}
-export { filterFocusState, isFocusState };