feat: add custom loader to react component

components/react/src/iconify.ts

@@ -27,6 +27,10 @@ import { calculateSize } from '@iconify/utils/lib/svg/size';
 import type { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build';
 
 // API
+import type {
+	IconifyCustomIconLoader,
+	IconifyCustomIconsLoader,
+} from '@iconify/core/lib/api/types';
 import type {
 	IconifyAPIFunctions,
 	IconifyAPIInternalFunctions,
@@ -59,6 +63,10 @@ import type {
 	IconifyIconLoaderAbort,
 } from '@iconify/core/lib/api/icons';
 import { loadIcons, loadIcon } from '@iconify/core/lib/api/icons';
+import {
+	setCustomIconLoader,
+	setCustomIconsLoader,
+} from '@iconify/core/lib/api/loaders';
 import { sendAPIQuery } from '@iconify/core/lib/api/query';
 
 // Cache
@@ -120,6 +128,8 @@ export {
 	PartialIconifyAPIConfig,
 	IconifyAPIQueryParams,
 	IconifyAPICustomQueryParams,
+	IconifyCustomIconLoader,
+	IconifyCustomIconsLoader,
 };
 
 // Builder functions
@@ -394,7 +404,13 @@ const _api: IconifyAPIInternalFunctions = {
 export { _api };
 
 // IconifyAPIFunctions
-export { addAPIProvider, loadIcons, loadIcon };
+export {
+	addAPIProvider,
+	loadIcons,
+	loadIcon,
+	setCustomIconLoader,
+	setCustomIconsLoader,
+};
 
 // IconifyStorageFunctions
 export {

components/react/tests/iconify/10-basic.test.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import { Icon, InlineIcon } from '../../dist/iconify';
+import {
+	Icon,
+	InlineIcon,
+	setCustomIconLoader,
+	loadIcon,
+} from '../../dist/iconify';
 import { describe, test, expect } from 'vitest';
 import { render } from '@testing-library/react';
 
@@ -32,4 +37,24 @@ describe('Creating component using object', () => {
 			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" style="vertical-align: -0.125em;" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
 		);
 	});
+
+	test('custom loader', async () => {
+		const prefix = 'customLoader';
+		const name = 'TestIcon';
+
+		// Set custom loader and load icon data
+		setCustomIconLoader(() => {
+			return iconData;
+		}, prefix);
+		await loadIcon(`${prefix}:${name}`);
+
+		// Create component
+		const renderResult = render(
+			<Icon icon={`${prefix}:${name}`} ssr={true} />
+		);
+
+		expect(renderResult.container.innerHTML).toEqual(
+			`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--${prefix}" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>`
+		);
+	});
 });