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

chore(utils): make icon data customisable in loader, add name for context

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2024-07-29 11:08:43 +03:00
parent 439a862a1a
commit 29117bdfcd
4 changed files with 42 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/utils/src/loader/modern.ts
View File

@ -22,8 +22,16 @@ export async function searchForIcon(
if (iconData) { if (iconData) {
debug(`${collection}:${id}`); debug(`${collection}:${id}`);
let defaultCustomizations = { ...defaultIconCustomisations }; let defaultCustomizations = { ...defaultIconCustomisations };
if (typeof customize === 'function') if (typeof customize === 'function') {
defaultCustomizations = customize(defaultCustomizations); // Clone icon data to make it mutable
iconData = Object.assign({}, iconData);
defaultCustomizations =
customize(
defaultCustomizations,
iconData,
`${collection}:${id}`
) ?? defaultCustomizations;
}
const { const {
attributes: { width, height, ...restAttributes }, attributes: { width, height, ...restAttributes },

10
packages/utils/src/loader/types.ts
View File

@ -1,6 +1,6 @@
import type { Awaitable } from '@antfu/utils'; import type { Awaitable } from '@antfu/utils';
import type { FullIconCustomisations } from '../customisations/defaults'; import type { FullIconCustomisations } from '../customisations/defaults';
import type { IconifyJSON } from '@iconify/types'; import type { IconifyIcon, IconifyJSON } from '@iconify/types';
/** /**
* External package name. * External package name.
@ -69,11 +69,15 @@ export type IconCustomizations = {
* Change default icon customizations values. * Change default icon customizations values.
* *
* @param defaultCustomizations Default icon's customizations values. * @param defaultCustomizations Default icon's customizations values.
* @param data The icon data. Mutable, you can change the icon data.
* @param name The icon name, can be used to check if icon needs to be customised.
* @return The modified icon's customizations values. * @return The modified icon's customizations values.
*/ */
customize?: ( customize?: (
defaultCustomizations: FullIconCustomisations defaultCustomizations: FullIconCustomisations,
) => FullIconCustomisations; data: IconifyIcon,
name: string
) => FullIconCustomisations | undefined;
/** /**
* Custom icon customizer. * Custom icon customizer.
*/ */

11
packages/utils/tests/get-custom-icon-test.ts
View File

@ -143,4 +143,15 @@ describe('Testing getCustomIcon', () => {
expect(result && result.indexOf(' width="') === -1).toBeTruthy(); expect(result && result.indexOf(' width="') === -1).toBeTruthy();
expect(result && result.indexOf(' height="') === -1).toBeTruthy(); expect(result && result.indexOf(' height="') === -1).toBeTruthy();
}); });
test('CustomIconLoader with non-square icon', async () => {
const svg =
'<svg viewBox="0 0 90 120"><circle cx="45" cy="60" r="30"/></svg>';
const result = await getCustomIcon(() => svg, 'a', 'b', {
addXmlNs: true,
});
expect(result).toEqual(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 120"><circle cx="45" cy="60" r="30"/></svg>'
);
});
}); });

21
packages/utils/tests/iconify-icon-test.ts
View File

@ -11,7 +11,7 @@ describe('Testing loadIcon with @iconify-json/flat-color-icons>', () => {
addXmlNs: true, addXmlNs: true,
}); });
expect(result).toBeTruthy(); expect(result).toBeTruthy();
expect(result && result.indexOf('xmlns:xlink=') === -1).toBeTruthy(); expect(result && !result.includes('xmlns:xlink=')).toBeTruthy();
}); });
test('loadIcon with customize with default style and class', async () => { test('loadIcon with customize with default style and class', async () => {
@ -19,7 +19,14 @@ describe('Testing loadIcon with @iconify-json/flat-color-icons>', () => {
defaultStyle: 'margin-top: 1rem;', defaultStyle: 'margin-top: 1rem;',
defaultClass: 'clazz', defaultClass: 'clazz',
customizations: { customizations: {
customize(props) { customize(props, data, name) {
// Check props
expect(props.width).toBeNull();
expect(data.width).toBe(48);
expect(data.height).toBe(48);
expect(name).toBe('flat-color-icons:up-right');
// Change props
props.width = '2em'; props.width = '2em';
props.height = '2em'; props.height = '2em';
return props; return props;
@ -27,10 +34,10 @@ describe('Testing loadIcon with @iconify-json/flat-color-icons>', () => {
}, },
}); });
expect(result).toBeTruthy(); expect(result).toBeTruthy();
expect(result && result.indexOf('margin-top: 1rem;') > -1).toBeTruthy(); expect(result && result.includes('margin-top: 1rem;')).toBeTruthy();
expect(result && result.indexOf('class="clazz"') > -1).toBeTruthy(); expect(result && result.includes('class="clazz"')).toBeTruthy();
expect(result && result.indexOf('width="2em"') > -1).toBeTruthy(); expect(result && result.includes('width="2em"')).toBeTruthy();
expect(result && result.indexOf('height="2em"') > -1).toBeTruthy(); expect(result && result.includes('height="2em"')).toBeTruthy();
}); });
test('loadIcon preserves customizations order', async () => { test('loadIcon preserves customizations order', async () => {
@ -100,7 +107,7 @@ describe('Testing loadIcon with @iconify-json/flat-color-icons>', () => {
expect(result && result.includes('height="1em"')).toBeTruthy(); expect(result && result.includes('height="1em"')).toBeTruthy();
}); });
test.only('loadIcon with custom width/height', async () => { test('loadIcon with custom width/height', async () => {
const result = await loadNodeIcon('flat-color-icons', 'up-right', { const result = await loadNodeIcon('flat-color-icons', 'up-right', {
customizations: { customizations: {
customize(props) { customize(props) {