diff --git a/packages/utils/package.json b/packages/utils/package.json index 0d26917..46f2176 100644 --- a/packages/utils/package.json +++ b/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", diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index 06a3155..c8159e5 100644 --- a/packages/utils/src/index.ts +++ b/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'; diff --git a/packages/utils/src/loader/custom.ts b/packages/utils/src/loader/custom.ts index 321a6c2..ba9b5da 100644 --- a/packages/utils/src/loader/custom.ts +++ b/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; } diff --git a/packages/utils/src/loader/loader.ts b/packages/utils/src/loader/loader.ts index 62a5b6f..666ee69 100644 --- a/packages/utils/src/loader/loader.ts +++ b/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 (result) { - return result; + if (typeof custom === 'function') { + const result = await custom(icon); + if (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); } } diff --git a/packages/utils/src/loader/types.ts b/packages/utils/src/loader/types.ts index 7522530..a45b395 100644 --- a/packages/utils/src/loader/types.ts +++ b/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 + customCollections?: Record Awaitable) | undefined | CustomIconLoader | InlineCollection> /** * Icon customizer diff --git a/packages/utils/tests/load-icon-test.ts b/packages/utils/tests/load-icon-test.ts index 85513a4..9007708 100644 --- a/packages/utils/tests/load-icon-test.ts +++ b/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();