chore: return undefined in getIcon if icon was not attempted to load, null if failed to load

components/vue/package.json

@@ -2,7 +2,7 @@
 	"name": "@iconify/vue",
 	"description": "Iconify icon component for Vue 3.",
 	"author": "Vjacheslav Trushkin",
-	"version": "4.2.0-dev.1",
+	"version": "4.2.0-dev.2",
 	"publishConfig": {
 		"tag": "next"
 	},

iconify-icon/icon/package.json

@@ -2,7 +2,7 @@
 	"name": "iconify-icon",
 	"description": "Icon web component that loads icon data on demand. Over 200,000 icons to choose from",
 	"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
-	"version": "2.2.0-dev.1",
+	"version": "2.2.0-dev.2",
 	"publishConfig": {
 		"tag": "next"
 	},

packages/core/src/storage/functions.ts

@@ -24,8 +24,11 @@ export interface IconifyStorageFunctions {
 
 	/**
 	 * Get icon data with all properties
+	 *
+	 * Returns null if icon is missing (attempted to load, but failed)
+	 * Returns undefined if icon was not loaded
 	 */
-	getIcon: (name: string) => Required<IconifyIcon> | null;
+	getIcon: (name: string) => Required<IconifyIcon> | null | undefined;
 
 	/**
 	 * List all available icons
@@ -35,8 +38,10 @@ export interface IconifyStorageFunctions {
 	/* Add icons */
 	/**
 	 * Add icon to storage
+	 *
+	 * Data is null if icon is missing
 	 */
-	addIcon: (name: string, data: IconifyIcon) => boolean;
+	addIcon: (name: string, data: IconifyIcon | null) => boolean;
 
 	/**
 	 * Add icon set to storage
@@ -62,7 +67,7 @@ export function allowSimpleNames(allow?: boolean): boolean {
  * Returns:
  * - IconifyIcon on success, object directly from storage so don't modify it
  * - null if icon is marked as missing (returned in `not_found` property from API, so don't bother sending API requests)
- * - undefined if icon is missing
+ * - undefined if icon is missing in storage
  */
 export function getIconData(
 	name: string | IconifyIconName
@@ -83,13 +88,18 @@ export function getIconData(
 /**
  * Add one icon
  */
-export function addIcon(name: string, data: IconifyIcon): boolean {
+export function addIcon(name: string, data: IconifyIcon | null): boolean {
 	const icon = stringToIcon(name, true, simpleNames);
 	if (!icon) {
 		return false;
 	}
 	const storage = getStorage(icon.provider, icon.prefix);
+	if (data) {
 		return addIconToStorage(storage, icon.name, data);
+	} else {
+		storage.missing.add(icon.name);
+		return true;
+	}
 }
 
 /**
@@ -115,7 +125,7 @@ export function addCollection(data: IconifyJSON, provider?: string): boolean {
 			data.prefix = '';
 
 			parseIconSet(data, (name, icon) => {
-				if (icon && addIcon(name, icon)) {
+				if (addIcon(name, icon)) {
 					added = true;
 				}
 			});
@@ -149,12 +159,14 @@ export function iconLoaded(name: string): boolean {
 /**
  * Get full icon
  */
-export function getIcon(name: string): Required<IconifyIcon> | null {
+export function getIcon(
+	name: string
+): Required<IconifyIcon> | null | undefined {
 	const result = getIconData(name);
 	return result
 		? {
 				...defaultIconProps,
 				...result,
 		  }
-		: null;
+		: result;
 }

packages/core/tests/storage/storage-functions-test.ts

@@ -26,11 +26,12 @@ describe('Testing IconifyStorageFunctions', () => {
 	it('Storage functions', () => {
 		const provider = nextProvider();
 		const testName = `@${provider}:foo:bar`;
+		const missingIcon = `@${provider}:foo:missing`;
 
 		// Empty
 		expect(iconLoaded(testName)).toBe(false);
 		expect(getIconData(testName)).toBeUndefined();
-		expect(getIcon(testName)).toBeNull();
+		expect(getIcon(testName)).toBeUndefined();
 		expect(listIcons(provider)).toEqual([]);
 
 		// Add and test one icon
@@ -51,6 +52,12 @@ describe('Testing IconifyStorageFunctions', () => {
 			...expected,
 		});
 
+		// Add null icon
+		expect(addIcon(missingIcon, null)).toBe(true);
+		expect(getIconData(missingIcon)).toBeNull();
+		expect(getIcon(missingIcon)).toBeNull();
+		expect(listIcons(provider)).toEqual([testName]);
+
 		// Add icon set
 		const prefix = 'prefix' + (count++).toString();
 		const storage = getStorage('', prefix);
@@ -83,7 +90,7 @@ describe('Testing IconifyStorageFunctions', () => {
 		// Test 'invalid' icon
 		expect(iconLoaded(`${prefix}:invalid`)).toBe(false);
 		expect(getIconData(`${prefix}:invalid`)).toBeUndefined();
-		expect(getIcon(`${prefix}:invalid`)).toBeNull();
+		expect(getIcon(`${prefix}:invalid`)).toBeUndefined();
 	});
 
 	it('Invalid icon name', () => {
@@ -92,7 +99,7 @@ describe('Testing IconifyStorageFunctions', () => {
 		// Empty
 		expect(iconLoaded(testName)).toBe(false);
 		expect(getIconData(testName)).toBeUndefined();
-		expect(getIcon(testName)).toBeNull();
+		expect(getIcon(testName)).toBeUndefined();
 
 		// Add and test one icon (icon should not be added)
 		expect(
@@ -125,7 +132,7 @@ describe('Testing IconifyStorageFunctions', () => {
 
 		// Empty
 		expect(iconLoaded(testName)).toBe(false);
-		expect(getIcon(testName)).toBeNull();
+		expect(getIcon(testName)).toBeUndefined();
 
 		// Add and test one icon
 		expect(
@@ -149,6 +156,7 @@ describe('Testing IconifyStorageFunctions', () => {
 		const prefix2 = `prefixed${n}`;
 		const name2 = `icon${n2}`;
 		const missing = `missing${n}`;
+		const notLoaded = `not-loaded${n}`;
 		expect(
 			addCollection({
 				prefix: '',
@@ -201,9 +209,14 @@ describe('Testing IconifyStorageFunctions', () => {
 			...expected,
 		});
 
-		// Test missing icon: should not exist because without provider missing icon cannot be added
+		// Test icon that was never loaded
+		expect(iconLoaded(notLoaded)).toBe(false);
+		expect(getIconData(notLoaded)).toBeUndefined();
+		expect(getIcon(notLoaded)).toBeUndefined();
+
+		// Test icon marked as missing
 		expect(iconLoaded(missing)).toBe(false);
-		expect(getIconData(missing)).toBeUndefined();
+		expect(getIconData(missing)).toBeNull();
 		expect(getIcon(missing)).toBeNull();
 	});
 });