chore: add modern logic to loadIcon and update types

test: add dynamic import for loadIcon test
cleanup: remove unused dependencies

packages/utils/package.json

@@ -162,12 +162,9 @@
 		}
 	},
 	"dependencies": {
-		"@antfu/install-pkg": "^0.1.0",
 		"@antfu/utils": "^0.3.0",
 		"@iconify/types": "^1.0.12",
-		"debug": "^4.3.3",
-		"kolorist": "^1.5.0",
-		"local-pkg": "^0.4.0"
+		"debug": "^4.3.3"
 	},
 	"devDependencies": {
 		"@iconify-json/flat-color-icons": "^1.0.2",

packages/utils/src/index.ts

@@ -57,6 +57,7 @@ export type {
 export { mergeIconProps } from './loader/utils';
 export { getCustomIcon } from './loader/custom';
 export { searchForIcon } from './loader/modern';
+export { loadIcon } from './loader/loader';
 
 // Misc
 export { camelize, camelToKebab, pascalize } from './misc/strings';

packages/utils/src/loader/custom.ts

@@ -20,7 +20,7 @@ export async function getCustomIcon(
 	if (typeof custom === 'function') {
 		result = await custom(icon);
 	} else {
-		const inline = custom[icon];
+		const inline = (custom as InlineCollection)[icon];
 		result = typeof inline === 'function' ? await inline() : inline;
 	}
 

packages/utils/src/loader/loader.ts

@@ -1,5 +1,6 @@
 import { getCustomIcon } from './custom';
 import type { IconifyLoaderOptions } from './types';
+import { searchForIcon } from './modern';
 
 export async function loadIcon(
 	collection: string,
@@ -9,9 +10,26 @@ export async function loadIcon(
 	const custom = options?.customCollections?.[collection];
 
 	if (custom) {
-		const result = await getCustomIcon(custom, collection, icon, options);
+		if (typeof custom === 'function') {
+			const result = await custom(icon);
 			if (result) {
-			return result;
+				if (typeof result === 'string') {
+					return await getCustomIcon(() => result as string, collection, icon, options);
+				}
+				// if using dynamic import and requesting the json file
+				// for example: carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default as any)
+				if ('icons' in result) {
+					// possible icon names
+					const ids = [
+						icon,
+						icon.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(),
+						icon.replace(/([a-z])(\d+)/g, '$1-$2'),
+					];
+					return await searchForIcon(result, collection, ids, options)
+				}
+			}
+		} else {
+			return await getCustomIcon(custom, collection, icon, options);
 		}
 	}
 

packages/utils/src/loader/types.ts

@@ -1,5 +1,6 @@
 import type { Awaitable } from '@antfu/utils';
 import type { FullIconCustomisations } from '../customisations';
+import type { IconifyJSON } from '@iconify/types';
 
 /**
  * Custom icon loader, used by `getCustomIcon`.
@@ -109,7 +110,7 @@ export type IconifyLoaderOptions = {
 	/**
 	 * Loader for custom loaders
 	 */
-	customCollections?: Record<string, CustomIconLoader | InlineCollection>
+	customCollections?: Record<string, (() => Awaitable<IconifyJSON>) | undefined | CustomIconLoader | InlineCollection>
 
 	/**
 	 * Icon customizer

packages/utils/tests/load-icon-test.ts

@@ -23,6 +23,17 @@ describe('Testing loadIcon', () => {
 		expect(svg).toEqual(result);
 	});
 
+	test('CustomCollection using dynamic import', async () => {
+		const result = await loadIcon('flat-color-icons', 'up-right', {
+			customCollections: {
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore
+				'flat-color-icons': () => import('@iconify-json/flat-color-icons/icons.json').then(i => i?.default),
+			},
+		});
+		expect(result).toBeTruthy();
+	});
+
 	test('CustomCollection with transform', async () => {
 		const svg = await loader('circle');
 		expect(svg).toBeTruthy();