feat: add custom loaders to web component

iconify-icon/icon/src/attributes/icon/index.ts

@@ -22,15 +22,36 @@ export function parseIconValue(
 	value: unknown,
 	onload: IconOnLoadCallback
 ): CurrentIconData {
-	// Check if icon name is valid
+	if (typeof value === 'object') {
-	const name =
-		typeof value === 'string' ? stringToIcon(value, true, true) : null;
-	if (!name) {
-		// Test for serialised object
 		const data = testIconObject(value);
 		return {
-			value,
 			data,
+			value,
+		};
+	}
+	if (typeof value !== 'string') {
+		// Invalid value
+		return {
+			value,
+		};
+	}
+
+	// Check for JSON
+	if (value.includes('{')) {
+		const data = testIconObject(value);
+		if (data) {
+			return {
+				data,
+				value,
+			};
+		}
+	}
+
+	// Parse icon name
+	const name = stringToIcon(value, true, true);
+	if (!name) {
+		return {
+			value,
 		};
 	}
 
@@ -38,7 +59,7 @@ export function parseIconValue(
 	const data = getIconData(name);
 
 	// Icon data exists or icon has no prefix. Do not load icon from API if icon has no prefix
-	if (data !== void 0 || !name.prefix) {
+	if (data !== undefined || !name.prefix) {
 		return {
 			value,
 			name,

iconify-icon/icon/src/attributes/icon/object.ts

@@ -11,6 +11,7 @@ export function testIconObject(value: unknown): IconifyIcon | undefined {
 				...obj,
 			};
 		}
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	} catch (err) {
 		//
 	}

iconify-icon/icon/src/component.ts

@@ -66,6 +66,7 @@ export function defineIconifyIcon(
 	try {
 		customElements = window.customElements;
 		ParentClass = window.HTMLElement;
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	} catch (err) {
 		return;
 	}
@@ -228,6 +229,7 @@ export function defineIconifyIcon(
 			if (value && value.slice(0, 1) === '{') {
 				try {
 					return JSON.parse(value);
+					// eslint-disable-next-line @typescript-eslint/no-unused-vars
 				} catch (err) {
 					//
 				}
@@ -284,6 +286,7 @@ export function defineIconifyIcon(
 					try {
 						(root.lastChild as SVGSVGElement).setCurrentTime(0);
 						return;
+						// eslint-disable-next-line @typescript-eslint/no-unused-vars
 					} catch (err) {
 						// Failed: setCurrentTime() is not supported
 					}
@@ -468,11 +471,13 @@ export function defineIconifyIcon(
 						}
 					});
 					this._observer.observe(this);
+					// eslint-disable-next-line @typescript-eslint/no-unused-vars
 				} catch (err) {
 					// Something went wrong, possibly observer is not supported
 					if (this._observer) {
 						try {
 							this._observer.disconnect();
+							// eslint-disable-next-line @typescript-eslint/no-unused-vars
 						} catch (err) {
 							//
 						}

iconify-icon/icon/src/functions.ts

@@ -40,6 +40,10 @@ import {
 } from '@iconify/core/lib/api/modules/fetch';
 import { loadIcons, loadIcon } from '@iconify/core/lib/api/icons';
 import { sendAPIQuery } from '@iconify/core/lib/api/query';
+import {
+	setCustomIconLoader,
+	setCustomIconsLoader,
+} from '@iconify/core/lib/api/loaders';
 
 // Cache
 import { initBrowserStorage } from '@iconify/core/lib/browser-storage';
@@ -92,6 +96,7 @@ export function exportFunctions(): IconifyExportedFunctions {
 	let _window: WindowWithIconifyStuff;
 	try {
 		_window = window as WindowWithIconifyStuff;
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	} catch (err) {
 		//
 	}
@@ -120,6 +125,7 @@ export function exportFunctions(): IconifyExportedFunctions {
 							) {
 								console.error(err);
 							}
+							// eslint-disable-next-line @typescript-eslint/no-unused-vars
 						} catch (e) {
 							console.error(err);
 						}
@@ -146,6 +152,7 @@ export function exportFunctions(): IconifyExportedFunctions {
 						if (!addAPIProvider(key, value)) {
 							console.error(err);
 						}
+						// eslint-disable-next-line @typescript-eslint/no-unused-vars
 					} catch (e) {
 						console.error(err);
 					}
@@ -181,6 +188,8 @@ export function exportFunctions(): IconifyExportedFunctions {
 		loadIcons,
 		loadIcon,
 		addAPIProvider,
+		setCustomIconLoader,
+		setCustomIconsLoader,
 		appendCustomStyle,
 		_api,
 	};

iconify-icon/icon/src/index.ts

@@ -11,6 +11,10 @@ import type { IconifyBuilderFunctions } from '@iconify/core/lib/builder/function
 import type { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build';
 
 // API
+import type {
+	IconifyCustomIconLoader,
+	IconifyCustomIconsLoader,
+} from '@iconify/core/lib/api/types';
 import type {
 	IconifyAPIFunctions,
 	IconifyAPIInternalFunctions,
@@ -82,6 +86,8 @@ export {
 	PartialIconifyAPIConfig,
 	IconifyAPIQueryParams,
 	IconifyAPICustomQueryParams,
+	IconifyCustomIconLoader,
+	IconifyCustomIconsLoader,
 };
 
 // Builder functions
@@ -122,6 +128,8 @@ const {
 	svgToURL,
 	loadIcons,
 	loadIcon,
+	setCustomIconLoader,
+	setCustomIconsLoader,
 	addAPIProvider,
 	_api,
 } = IconifyIconComponent;
@@ -142,6 +150,8 @@ export {
 	loadIcons,
 	loadIcon,
 	addAPIProvider,
+	setCustomIconLoader,
+	setCustomIconsLoader,
 	appendCustomStyle,
 	_api,
 };

iconify-icon/icon/tests/icon-load-test.ts

@@ -37,11 +37,16 @@ describe('Testing parseIconValue without API', () => {
 		});
 		expect(result).toEqual({
 			value,
+			name: {
+				provider: '',
+				prefix: '',
+				name: value,
+			},
 		});
 	});
 
 	it('Icon without prefix', () => {
-		const value = 'test';
+		const value = 'Test';
 		const result = parseIconValue(value, () => {
 			throw new Error('callback should not have been called');
 		});

iconify-icon/react/src/iconify.ts

@@ -37,6 +37,8 @@ export type {
 	PartialIconifyAPIConfig,
 	IconifyAPIQueryParams,
 	IconifyAPICustomQueryParams,
+	IconifyCustomIconLoader,
+	IconifyCustomIconsLoader,
 } from 'iconify-icon';
 
 // Builder functions
@@ -70,6 +72,8 @@ export {
 	loadIcons,
 	loadIcon,
 	addAPIProvider,
+	setCustomIconLoader,
+	setCustomIconsLoader,
 	appendCustomStyle,
 	_api,
 } from 'iconify-icon';

iconify-icon/solid/.gitignore

@@ -2,3 +2,4 @@
 node_modules
 dist
 lib
+tsconfig.tsbuildinfo

iconify-icon/solid/src/iconify.tsx

@@ -36,6 +36,8 @@ export type {
 	PartialIconifyAPIConfig,
 	IconifyAPIQueryParams,
 	IconifyAPICustomQueryParams,
+	IconifyCustomIconLoader,
+	IconifyCustomIconsLoader,
 } from 'iconify-icon';
 
 // Builder functions
@@ -69,6 +71,8 @@ export {
 	loadIcons,
 	loadIcon,
 	addAPIProvider,
+	setCustomIconLoader,
+	setCustomIconsLoader,
 	appendCustomStyle,
 	_api,
 } from 'iconify-icon';

iconify-icon/solid/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["./src/iconify.tsx"],"version":"5.6.3"}