agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-12-04 18:23:17 +00:00
Code Issues Releases Activity

feat: add custom loader to react component

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2024-11-04 08:45:36 +02:00
parent 25bce96682
commit d3f691b65f
2 changed files with 43 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/react/src/iconify.ts
View File

@ -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 {

27
components/react/tests/iconify/10-basic.test.tsx
View File

@ -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>`
);
});
});