chore: update dependencies

components/ember/package.json

@@ -18,7 +18,7 @@
 	"scripts": {
 		"build": "node build",
 		"build:lib": "tsc -b",
-		"build:rollup": "rollup -c rollup.config.js",
+		"build:rollup": "rollup -c rollup.config.mjs",
 		"build:api": "api-extractor run --local --verbose --config api-extractor.json",
 		"build:cleanup": "node cleanup"
 	},

components/react/package.json

@@ -17,7 +17,7 @@
 		"prebuild": "pnpm run clean",
 		"build": "node build",
 		"build:lib": "tsc -b",
-		"build:dist": "rollup -c rollup.config.js",
+		"build:dist": "rollup -c rollup.config.mjs",
 		"prebuild:api": "api-extractor run --local --verbose --config api-extractor.offline.json",
 		"build:api": "api-extractor run --local --verbose --config api-extractor.iconify.json",
 		"build:cleanup": "node cleanup",
@@ -48,20 +48,20 @@
 		"@iconify/types": "workspace:^"
 	},
 	"devDependencies": {
-		"@babel/preset-env": "^7.19.0",
+		"@babel/preset-env": "^7.20.2",
 		"@babel/preset-react": "^7.18.6",
 		"@iconify/core": "workspace:^",
 		"@iconify/utils": "workspace:^",
-		"@microsoft/api-extractor": "^7.30.0",
+		"@microsoft/api-extractor": "^7.33.7",
-		"@rollup/plugin-node-resolve": "^14.0.0",
+		"@rollup/plugin-node-resolve": "^15.0.1",
-		"@types/react": "^17.0.49",
+		"@types/react": "^18.0.26",
-		"babel-jest": "^29.0.2",
+		"babel-jest": "^29.3.1",
-		"jest": "^29.0.2",
+		"jest": "^29.3.1",
 		"react": "^18.2.0",
 		"react-test-renderer": "^18.2.0",
 		"rimraf": "^3.0.2",
-		"rollup": "^2.79.0",
+		"rollup": "^3.8.1",
-		"typescript": "^4.8.2"
+		"typescript": "^4.9.4"
 	},
 	"peerDependencies": {
 		"react": ">=16"

components/react/rollup.config.mjs

@@ -26,7 +26,6 @@ names.forEach((name) => {
 			{
 				file: `dist/${name}.js`,
 				format: 'cjs',
-				interop: false,
 			},
 		],
 		external: ['react'],

components/react/src/iconify.ts

@@ -431,7 +431,7 @@ export const Icon = React.forwardRef<IconRef, IconProps>(function Icon(
 		...props,
 		_ref: ref,
 		_inline: false,
-	};
+	} as InternalIconProps;
 	return React.createElement(IconComponent, newProps);
 });
 
@@ -442,7 +442,11 @@ export const Icon = React.forwardRef<IconRef, IconProps>(function Icon(
  */
 export const InlineIcon = React.forwardRef<IconRef, IconProps>(
 	function InlineIcon(props, ref) {
-		const newProps = { ...props, _ref: ref, _inline: true };
+		const newProps = {
+			...props,
+			_ref: ref,
+			_inline: true,
+		} as InternalIconProps;
 		return React.createElement(IconComponent, newProps);
 	}
 );

components/svelte/package.json

@@ -21,7 +21,7 @@
 		"prebuild": "pnpm run cleanup",
 		"build": "node build",
 		"build:tsc": "tsc -b",
-		"build:bundles": "rollup -c rollup.config.js",
+		"build:bundles": "rollup -c rollup.config.mjs",
 		"build:api": "node build --only-api",
 		"test": "vitest"
 	},
@@ -31,21 +31,21 @@
 	"devDependencies": {
 		"@iconify/core": "workspace:^",
 		"@iconify/utils": "workspace:^",
-		"@microsoft/api-extractor": "^7.30.0",
+		"@microsoft/api-extractor": "^7.33.7",
-		"@rollup/plugin-node-resolve": "^14.0.0",
+		"@rollup/plugin-node-resolve": "^15.0.1",
-		"@rollup/plugin-typescript": "^8.5.0",
+		"@rollup/plugin-typescript": "^10.0.1",
-		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.49",
+		"@sveltejs/vite-plugin-svelte": "^2.0.2",
 		"@testing-library/jest-dom": "^5.16.5",
-		"@testing-library/svelte": "^3.2.1",
+		"@testing-library/svelte": "^3.2.2",
 		"@tsconfig/svelte": "^3.0.0",
-		"@types/jest": "^29.0.0",
+		"@types/jest": "^29.2.4",
-		"@types/node": "^18.7.15",
+		"@types/node": "^18.11.17",
 		"rimraf": "^3.0.2",
-		"rollup": "^2.79.0",
+		"rollup": "^3.8.1",
 		"rollup-plugin-svelte": "^7.1.0",
-		"svelte": "3.50.0",
+		"svelte": "3.55.0",
-		"svelte-preprocess": "^4.10.7",
+		"svelte-preprocess": "^5.0.0",
-		"vitest": "^0.23.1"
+		"vitest": "^0.26.2"
 	},
 	"peerDependencies": {
 		"svelte": ">=3"

components/svelte/tests/api/10-api-mock.test.ts

@@ -6,39 +6,41 @@ import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
 import { provider, nextPrefix } from './load';
 
 describe('Testing fake API', () => {
-	test('using fake API to load icon', (done) => {
+	test('using fake API to load icon', () => {
-		const prefix = nextPrefix();
+		return new Promise((fulfill, reject) => {
-		const name = 'mock-test';
+			const prefix = nextPrefix();
-		const iconName = `@${provider}:${prefix}:${name}`;
+			const name = 'mock-test';
-		mockAPIData({
+			const iconName = `@${provider}:${prefix}:${name}`;
-			type: 'icons',
+			mockAPIData({
-			provider,
+				type: 'icons',
-			prefix,
+				provider,
-			response: {
 				prefix,
-				icons: {
+				response: {
-					[name]: {
+					prefix,
-						body: '<g />',
+					icons: {
+						[name]: {
+							body: '<g />',
+						},
 					},
 				},
-			},
+			});
-		});
 
-		// Check if icon has been loaded
+			// Check if icon has been loaded
-		expect(iconExists(iconName)).toBe(false);
+			expect(iconExists(iconName)).toBe(false);
 
-		// Load icon
+			// Load icon
-		loadIcons([iconName], (loaded, missing, pending) => {
+			loadIcons([iconName], (loaded, missing, pending) => {
-			expect(loaded).toMatchObject([
+				expect(loaded).toMatchObject([
-				{
+					{
-					provider,
+						provider,
-					prefix,
+						prefix,
-					name,
+						name,
-				},
+					},
-			]);
+				]);
-			expect(missing).toMatchObject([]);
+				expect(missing).toMatchObject([]);
-			expect(pending).toMatchObject([]);
+				expect(pending).toMatchObject([]);
-			done();
+				fulfill(true);
+			});
 		});
 	});
 });

components/svelte/tests/api/20-rendering-from-api.test.ts

@@ -3,7 +3,7 @@
  */
 import { tick } from 'svelte';
 import { render } from '@testing-library/svelte';
-import Icon, { loadIcons, iconExists } from '../../';
+import Icon, { loadIcons, iconExists } from '../../dist';
 import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
 import { provider, nextPrefix } from './load';
 
@@ -14,201 +14,208 @@ const iconData = {
 };
 
 describe('Rendering icon', () => {
-	test('rendering icon after loading it', (done) => {
+	test('rendering icon after loading it', () => {
-		const prefix = nextPrefix();
+		return new Promise((fulfill, reject) => {
-		const name = 'render-test';
+			const prefix = nextPrefix();
-		const iconName = `@${provider}:${prefix}:${name}`;
+			const name = 'render-test';
-		const className = `iconify iconify--${prefix} iconify--${provider}`;
+			const iconName = `@${provider}:${prefix}:${name}`;
-		let onLoadCalled = false;
+			const className = `iconify iconify--${prefix} iconify--${provider}`;
+			let onLoadCalled = false;
 
-		mockAPIData({
+			mockAPIData({
-			type: 'icons',
+				type: 'icons',
-			provider,
+				provider,
-			prefix,
-			response: {
 				prefix,
-				icons: {
+				response: {
-					[name]: iconData,
-				},
-			},
-		});
-
-		// Check if icon has been loaded
-		expect(iconExists(iconName)).toBe(false);
-
-		// Load icon
-		loadIcons([iconName], (loaded, missing, pending) => {
-			// Make sure icon has been loaded
-			expect(loaded).toMatchObject([
-				{
-					provider,
 					prefix,
-					name,
+					icons: {
+						[name]: iconData,
+					},
 				},
-			]);
+			});
-			expect(missing).toMatchObject([]);
+
-			expect(pending).toMatchObject([]);
+			// Check if icon has been loaded
-			expect(iconExists(iconName)).toBe(true);
+			expect(iconExists(iconName)).toBe(false);
+
+			// Load icon
+			loadIcons([iconName], (loaded, missing, pending) => {
+				// Make sure icon has been loaded
+				expect(loaded).toMatchObject([
+					{
+						provider,
+						prefix,
+						name,
+					},
+				]);
+				expect(missing).toMatchObject([]);
+				expect(pending).toMatchObject([]);
+				expect(iconExists(iconName)).toBe(true);
+
+				// Render component
+				const component = render(Icon, {
+					icon: iconName,
+					onLoad: (name: string) => {
+						expect(name).toBe(iconName);
+						expect(onLoadCalled).toBe(false);
+						onLoadCalled = true;
+					},
+				});
+				const node = component.container.querySelector('svg')!;
+				const html = (node.parentNode as HTMLDivElement).innerHTML;
+
+				// Check HTML immediately
+				expect(html).toBe(
+					'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
+						className +
+						'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+				);
+
+				// Make sure onLoad has been called
+				expect(onLoadCalled).toBe(true);
+
+				fulfill(true);
+			});
+		});
+	});
+
+	test('rendering icon before loading it', () => {
+		return new Promise((fulfill, reject) => {
+			const prefix = nextPrefix();
+			const name = 'mock-test';
+			const iconName = `@${provider}:${prefix}:${name}`;
+			const className = `iconify iconify--${prefix} iconify--${provider}`;
+			let onLoadCalled = false;
+
+			mockAPIData({
+				type: 'icons',
+				provider,
+				prefix,
+				response: {
+					prefix,
+					icons: {
+						[name]: iconData,
+					},
+				},
+				delay: (next) => {
+					// Icon should not have loaded yet
+					expect(iconExists(iconName)).toBe(false);
+
+					// onLoad should not have been called yet
+					expect(onLoadCalled).toBe(false);
+
+					// Send icon data
+					next();
+
+					// Test it again
+					expect(iconExists(iconName)).toBe(true);
+				},
+			});
+
+			// Check if icon has been loaded
+			expect(iconExists(iconName)).toBe(false);
 
 			// Render component
 			const component = render(Icon, {
 				icon: iconName,
+				// Also testing simple class
+				class: 'test',
 				onLoad: (name: string) => {
 					expect(name).toBe(iconName);
 					expect(onLoadCalled).toBe(false);
 					onLoadCalled = true;
+
+					// Check component on next tick
+					tick()
+						.then(() => {
+							const node =
+								component.container.querySelector('svg')!;
+							const html = (node.parentNode as HTMLDivElement)
+								.innerHTML;
+
+							// Check HTML
+							expect(html).toBe(
+								'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="test ' +
+									className +
+									'" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
+							);
+
+							fulfill(true);
+						})
+						.catch(reject);
 				},
 			});
-			const node = component.container.querySelector('svg')!;
-			const html = (node.parentNode as HTMLDivElement).innerHTML;
 
-			// Check HTML immediately
+			// Should render empty icon
-			expect(html).toBe(
+			const html = component.container.innerHTML;
-				'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
+			expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
-					className +
-					'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
-			);
 
-			// Make sure onLoad has been called
+			// onLoad should not have been called yet
-			expect(onLoadCalled).toBe(true);
+			expect(onLoadCalled).toBe(false);
-
-			done();
 		});
 	});
 
-	test('rendering icon before loading it', (done) => {
+	test('missing icon', () => {
-		const prefix = nextPrefix();
+		return new Promise((fulfill, reject) => {
-		const name = 'mock-test';
+			const prefix = nextPrefix();
-		const iconName = `@${provider}:${prefix}:${name}`;
+			const name = 'missing-icon';
-		const className = `iconify iconify--${prefix} iconify--${provider}`;
+			const iconName = `@${provider}:${prefix}:${name}`;
-		let onLoadCalled = false;
 
-		mockAPIData({
+			mockAPIData({
-			type: 'icons',
+				type: 'icons',
-			provider,
+				provider,
-			prefix,
-			response: {
 				prefix,
-				icons: {
+				response: 404,
-					[name]: iconData,
+				delay: (next) => {
+					// Icon should not have loaded yet
+					expect(iconExists(iconName)).toBe(false);
+
+					// Send icon data
+					next();
+
+					// Test it again
+					expect(iconExists(iconName)).toBe(false);
+
+					// Check if state was changed on next few ticks
+					tick()
+						.then(() => {
+							const html = component.container.innerHTML;
+							expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
+								'<div></div>'
+							);
+							return tick();
+						})
+						.then(() => {
+							const html = component.container.innerHTML;
+							expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
+								'<div></div>'
+							);
+							return tick();
+						})
+						.then(() => {
+							const html = component.container.innerHTML;
+							expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
+								'<div></div>'
+							);
+							fulfill(true);
+						})
+						.catch(reject);
 				},
-			},
+			});
-			delay: (next) => {
-				// Icon should not have loaded yet
-				expect(iconExists(iconName)).toBe(false);
 
-				// onLoad should not have been called yet
+			// Check if icon has been loaded
-				expect(onLoadCalled).toBe(false);
+			expect(iconExists(iconName)).toBe(false);
 
-				// Send icon data
+			// Render component
-				next();
+			const component = render(Icon, {
+				icon: iconName,
+				onLoad: () => {
+					throw new Error('onLoad called for empty icon!');
+				},
+			});
 
-				// Test it again
+			// Should render empty icon
-				expect(iconExists(iconName)).toBe(true);
+			const html = component.container.innerHTML;
-			},
+			expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
 		});
-
-		// Check if icon has been loaded
-		expect(iconExists(iconName)).toBe(false);
-
-		// Render component
-		const component = render(Icon, {
-			icon: iconName,
-			// Also testing simple class
-			class: 'test',
-			onLoad: (name: string) => {
-				expect(name).toBe(iconName);
-				expect(onLoadCalled).toBe(false);
-				onLoadCalled = true;
-
-				// Check component on next tick
-				tick()
-					.then(() => {
-						const node = component.container.querySelector('svg')!;
-						const html = (node.parentNode as HTMLDivElement)
-							.innerHTML;
-
-						// Check HTML
-						expect(html).toBe(
-							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="test ' +
-								className +
-								'" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
-						);
-
-						done();
-					})
-					.catch(done);
-			},
-		});
-
-		// Should render empty icon
-		const html = component.container.innerHTML;
-		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
-
-		// onLoad should not have been called yet
-		expect(onLoadCalled).toBe(false);
-	});
-
-	test('missing icon', (done) => {
-		const prefix = nextPrefix();
-		const name = 'missing-icon';
-		const iconName = `@${provider}:${prefix}:${name}`;
-
-		mockAPIData({
-			type: 'icons',
-			provider,
-			prefix,
-			response: 404,
-			delay: (next) => {
-				// Icon should not have loaded yet
-				expect(iconExists(iconName)).toBe(false);
-
-				// Send icon data
-				next();
-
-				// Test it again
-				expect(iconExists(iconName)).toBe(false);
-
-				// Check if state was changed on next few ticks
-				tick()
-					.then(() => {
-						const html = component.container.innerHTML;
-						expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
-							'<div></div>'
-						);
-						return tick();
-					})
-					.then(() => {
-						const html = component.container.innerHTML;
-						expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
-							'<div></div>'
-						);
-						return tick();
-					})
-					.then(() => {
-						const html = component.container.innerHTML;
-						expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
-							'<div></div>'
-						);
-						done();
-					})
-					.catch(done);
-			},
-		});
-
-		// Check if icon has been loaded
-		expect(iconExists(iconName)).toBe(false);
-
-		// Render component
-		const component = render(Icon, {
-			icon: iconName,
-			onLoad: () => {
-				throw new Error('onLoad called for empty icon!');
-			},
-		});
-
-		// Should render empty icon
-		const html = component.container.innerHTML;
-		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
 	});
 });

components/svelte/tests/api/30-changing-props.test.ts

@@ -1,371 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { tick } from 'svelte';
-import { render } from '@testing-library/svelte';
-import { iconExists } from '../../';
-import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
-import { provider, nextPrefix } from './load';
-import ChangeIcon from './fixtures/ChangeIcon.svelte';
-import ChangeProps from './fixtures/ChangeProps.svelte';
-
-const iconData = {
-	body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
-	width: 24,
-	height: 24,
-};
-
-const iconData2 = {
-	body: '<path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"/>',
-	width: 32,
-	height: 32,
-};
-
-type TriggerSwap = () => void;
-
-describe('Rendering icon', () => {
-	test('changing icon property', (done) => {
-		const prefix = nextPrefix();
-		const name = 'changing-prop';
-		const name2 = 'changing-prop2';
-		const iconName = `@${provider}:${prefix}:${name}`;
-		const iconName2 = `@${provider}:${prefix}:${name2}`;
-		const className = `iconify iconify--${prefix} iconify--${provider}`;
-		let onLoadCalled = ''; // Name of icon from last onLoad call
-		let triggerSwap: TriggerSwap | undefined;
-
-		mockAPIData({
-			type: 'icons',
-			provider,
-			prefix,
-			response: {
-				prefix,
-				icons: {
-					[name]: iconData,
-				},
-			},
-			delay: (next) => {
-				// Fixture callback should have been called
-				expect(typeof triggerSwap).toBe('function');
-
-				// Icon should not have loaded yet
-				expect(iconExists(iconName)).toBe(false);
-
-				// onLoad should not have been called yet
-				expect(onLoadCalled).toBe('');
-
-				// Send icon data
-				next();
-
-				// Test it again
-				expect(iconExists(iconName)).toBe(true);
-			},
-		});
-
-		mockAPIData({
-			type: 'icons',
-			provider,
-			prefix,
-			response: {
-				prefix,
-				icons: {
-					[name2]: iconData2,
-				},
-			},
-			delay: (next) => {
-				// Icon should not have loaded yet
-				expect(iconExists(iconName2)).toBe(false);
-
-				// onLoad should have been called only once for previous icon
-				expect(onLoadCalled).toBe(iconName);
-
-				// Send icon data
-				next();
-
-				// Test it again
-				expect(iconExists(iconName2)).toBe(true);
-			},
-		});
-
-		// Check if icon has been loaded
-		expect(iconExists(iconName)).toBe(false);
-
-		// Render component
-		const component = render(ChangeIcon, {
-			icon1: iconName,
-			icon2: iconName2,
-			expose: (swap: TriggerSwap) => {
-				triggerSwap = swap;
-			},
-			onLoad: (name: string) => {
-				// onLoad should be called only once per icon
-				switch (name) {
-					// First onLoad call
-					case iconName:
-						expect(onLoadCalled).toBe('');
-
-						// Wait 1 tick, then test rendered icon
-						tick()
-							.then(() => {
-								const node =
-									component.container.querySelector('svg')!;
-								const html = (node.parentNode as HTMLDivElement)
-									.innerHTML;
-
-								// Check HTML
-								expect(html).toBe(
-									'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
-										className +
-										'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
-								);
-
-								// Change property
-								triggerSwap!();
-							})
-							.catch(done);
-						break;
-
-					// Second onLoad call
-					case iconName2:
-						expect(onLoadCalled).toBe(iconName);
-
-						// Wait 1 tick, then test rendered icon
-						tick()
-							.then(() => {
-								const node =
-									component.container.querySelector('svg')!;
-								const html = (node.parentNode as HTMLDivElement)
-									.innerHTML;
-
-								// Check HTML
-								expect(html).toBe(
-									'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 32 32" class="' +
-										className +
-										'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
-								);
-
-								done();
-							})
-							.catch(done);
-						break;
-
-					default:
-						throw new Error(`Unexpected onLoad('${name}') call`);
-				}
-				onLoadCalled = name;
-			},
-		});
-
-		// Should render empty icon
-		const html = component.container.innerHTML;
-		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
-
-		// onLoad should not have been called yet
-		expect(onLoadCalled).toBe('');
-	});
-
-	test('changing icon property while loading', (done) => {
-		const prefix = nextPrefix();
-		const name = 'changing-prop';
-		const name2 = 'changing-prop2';
-		const iconName = `@${provider}:${prefix}:${name}`;
-		const iconName2 = `@${provider}:${prefix}:${name2}`;
-		const className = `iconify iconify--${prefix} iconify--${provider}`;
-		let onLoadCalled = ''; // Name of icon from last onLoad call
-		let isSync = true;
-		let triggerSwap: TriggerSwap | undefined;
-
-		mockAPIData({
-			type: 'icons',
-			provider,
-			prefix,
-			response: {
-				prefix,
-				icons: {
-					[name]: iconData,
-				},
-			},
-			delay: (next) => {
-				// Should have been called asynchronously
-				expect(isSync).toBe(false);
-
-				// Icon should not have loaded yet
-				expect(iconExists(iconName)).toBe(false);
-
-				// Send icon data
-				next();
-			},
-		});
-
-		mockAPIData({
-			type: 'icons',
-			provider,
-			prefix,
-			response: {
-				prefix,
-				icons: {
-					[name2]: iconData2,
-				},
-			},
-			delay: (next) => {
-				// Should have been called asynchronously
-				expect(isSync).toBe(false);
-
-				// Icon should not have loaded yet
-				expect(iconExists(iconName2)).toBe(false);
-
-				// Send icon data
-				next();
-
-				// Test it again
-				expect(iconExists(iconName2)).toBe(true);
-			},
-		});
-
-		// Check if icon has been loaded
-		expect(iconExists(iconName)).toBe(false);
-
-		// Render component
-		const component = render(ChangeIcon, {
-			icon1: iconName,
-			icon2: iconName2,
-			expose: (swap: TriggerSwap) => {
-				triggerSwap = swap;
-			},
-			onLoad: (name: string) => {
-				// onLoad should be called only for second icon
-				expect(name).toBe(iconName2);
-				onLoadCalled = name;
-
-				// Wait 1 tick, then test rendered icon
-				tick()
-					.then(() => {
-						const node = component.container.querySelector('svg')!;
-						const html = (node.parentNode as HTMLDivElement)
-							.innerHTML;
-
-						// Check HTML
-						expect(html).toBe(
-							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 32 32" class="' +
-								className +
-								'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
-						);
-
-						done();
-					})
-					.catch(done);
-			},
-		});
-
-		// Should render empty icon
-		const html = component.container.innerHTML;
-		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
-
-		// Fixture callback should have been called
-		expect(typeof triggerSwap).toBe('function');
-
-		// Change property
-		triggerSwap!();
-
-		// Async
-		isSync = false;
-
-		// onLoad should not have been called yet
-		expect(onLoadCalled).toBe('');
-	});
-
-	test('changing multiple properties', (done) => {
-		const prefix = nextPrefix();
-		const name = 'multiple-props';
-		const iconName = `@${provider}:${prefix}:${name}`;
-		const className = `iconify iconify--${prefix} iconify--${provider}`;
-		let onLoadCalled = false;
-		let triggerSwap: TriggerSwap | undefined;
-
-		mockAPIData({
-			type: 'icons',
-			provider,
-			prefix,
-			response: {
-				prefix,
-				icons: {
-					[name]: iconData,
-				},
-			},
-			delay: (next) => {
-				// Fixture callback should have been called
-				expect(typeof triggerSwap).toBe('function');
-
-				// Icon should not have loaded yet
-				expect(iconExists(iconName)).toBe(false);
-
-				// Send icon data
-				next();
-
-				// Test it again
-				expect(iconExists(iconName)).toBe(true);
-			},
-		});
-
-		// Check if icon has been loaded
-		expect(iconExists(iconName)).toBe(false);
-
-		// Render component
-		const component = render(ChangeProps, {
-			icon: iconName,
-			expose: (swap: TriggerSwap) => {
-				triggerSwap = swap;
-			},
-			onLoad: (name: string) => {
-				expect(name).toBe(iconName);
-
-				// Should be called only once
-				expect(onLoadCalled).toBe(false);
-				onLoadCalled = true;
-
-				// Check if state was changed on next tick
-				tick()
-					.then(() => {
-						const node = component.container.querySelector('svg')!;
-						const html = (node.parentNode as HTMLDivElement)
-							.innerHTML;
-
-						// Check HTML
-						expect(html).toBe(
-							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
-								className +
-								'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
-						);
-
-						// Add horizontal flip and style
-						triggerSwap!();
-
-						// Wait for component to re-render
-						return tick();
-					})
-					.then(() => {
-						// Check HTML again
-						const node = component.container.querySelector('svg')!;
-						const html = (node.parentNode as HTMLDivElement)
-							.innerHTML;
-
-						expect(html).toBe(
-							'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="' +
-								className +
-								'"><g transform="translate(24 0) scale(-1 1)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
-						);
-
-						done();
-					})
-					.catch(done);
-			},
-		});
-
-		// Should render empty icon
-		const html = component.container.innerHTML;
-		expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>');
-
-		// onLoad should not have been called yet
-		expect(onLoadCalled).toBe(false);
-	});
-});

components/svelte/tests/api/fixtures/ChangeIcon.svelte

@@ -1,21 +0,0 @@
-<script>
-    import Icon from '../../../';
-
-    export let icon1;
-    export let icon2;
-    export let expose;
-    export let onLoad;
-
-    let icon = icon1;
-
-    $: {
-        expose(swap);
-    }
-
-    function swap() {
-        icon = icon2;
-    }
-</script>
-<Icon icon={icon} on:load={event => {
-    onLoad(event.detail.icon)
-}} />

components/svelte/tests/api/fixtures/ChangeProps.svelte

@@ -1,25 +0,0 @@
-<script>
-    import Icon from '../../../';
-
-    export let icon;
-    export let expose;
-    export let onLoad;
-
-    const props = {
-        icon
-    };
-
-    $: {
-        expose(swap);
-    }
-
-    function swap() {
-        props.hFlip = true;
-        props.style = {
-            color: 'red'
-        }
-    }
-</script>
-<Icon {...props} on:load={event => {
-    onLoad?.(event.detail.icon)
-}} />

components/svg-framework/package.json

@@ -22,7 +22,7 @@
 		"prebuild": "pnpm run lint && pnpm run clean",
 		"build": "node build",
 		"build:lib": "tsc -b",
-		"build:dist": "rollup -c rollup.config.js",
+		"build:dist": "rollup -c rollup.config.mjs",
 		"build:api": "api-extractor run --local --verbose",
 		"build:api2": "api-extractor run --local --verbose --config api-extractor.without-api.json",
 		"test:jest": "jest --runInBand",
@@ -74,22 +74,22 @@
 	"devDependencies": {
 		"@iconify/core": "workspace:^",
 		"@iconify/utils": "workspace:^",
-		"@microsoft/api-extractor": "^7.30.0",
+		"@microsoft/api-extractor": "^7.33.7",
-		"@rollup/plugin-buble": "^0.21.3",
+		"@rollup/plugin-buble": "^1.0.1",
-		"@rollup/plugin-node-resolve": "^14.0.0",
+		"@rollup/plugin-node-resolve": "^15.0.1",
-		"@rollup/plugin-replace": "^4.0.0",
+		"@rollup/plugin-replace": "^5.0.2",
-		"@types/jest": "^29.0.0",
+		"@types/jest": "^29.2.4",
-		"@types/jsdom": "^20.0.0",
+		"@types/jsdom": "^20.0.1",
-		"@types/node": "^18.7.15",
+		"@types/node": "^18.11.17",
-		"@typescript-eslint/eslint-plugin": "^5.36.2",
+		"@typescript-eslint/eslint-plugin": "^5.47.0",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.23.0",
+		"eslint": "^8.30.0",
-		"jest": "^29.0.2",
+		"jest": "^29.3.1",
-		"jsdom": "^20.0.0",
+		"jsdom": "^20.0.3",
 		"rimraf": "^3.0.2",
-		"rollup": "^2.79.0",
+		"rollup": "^3.8.1",
 		"rollup-plugin-terser": "^7.0.2",
-		"ts-jest": "^29.0.0-next.1",
+		"ts-jest": "^29.0.3",
-		"typescript": "^4.8.2"
+		"typescript": "^4.9.4"
 	}
 }

components/vue/package.json

@@ -15,7 +15,7 @@
 	"scripts": {
 		"build": "node build",
 		"build:lib": "tsc -b",
-		"build:dist": "rollup -c rollup.config.js",
+		"build:dist": "rollup -c rollup.config.mjs",
 		"prebuild:api": "api-extractor run --local --verbose --config api-extractor.offline.json",
 		"build:api": "api-extractor run --local --verbose --config api-extractor.iconify.json",
 		"test": "vitest"
@@ -45,19 +45,19 @@
 		"@iconify/types": "workspace:^"
 	},
 	"devDependencies": {
-		"@babel/preset-env": "^7.19.0",
+		"@babel/preset-env": "^7.20.2",
 		"@iconify/core": "workspace:^",
 		"@iconify/utils": "workspace:^",
-		"@microsoft/api-extractor": "^7.30.0",
+		"@microsoft/api-extractor": "^7.33.7",
-		"@rollup/plugin-node-resolve": "^14.0.0",
+		"@rollup/plugin-node-resolve": "^15.0.1",
-		"@types/jest": "^29.0.0",
+		"@types/jest": "^29.2.4",
-		"@vitejs/plugin-vue": "^3.1.0",
+		"@vitejs/plugin-vue": "^4.0.0",
-		"@vue/test-utils": "^2.0.2",
+		"@vue/test-utils": "^2.2.6",
-		"jsdom": "^20.0.0",
+		"jsdom": "^20.0.3",
-		"rollup": "^2.79.0",
+		"rollup": "^3.8.1",
-		"typescript": "^4.8.2",
+		"typescript": "^4.9.4",
-		"vitest": "^0.23.1",
+		"vitest": "^0.26.2",
-		"vue": "^3.2.38"
+		"vue": "^3.2.45"
 	},
 	"peerDependencies": {
 		"vue": ">=3"

components/vue/src/render.ts

@@ -108,7 +108,7 @@ export const render = (
 	const mode: IconifyRenderMode = props.mode || 'svg';
 
 	// Copy style
-	const style: VStyle = {};
+	const style = {} as VStyle;
 	const propsStyle = props.style;
 	const customStyle =
 		typeof propsStyle === 'object' && !(propsStyle instanceof Array)

components/vue2/package.json

@@ -15,7 +15,7 @@
 	"scripts": {
 		"build": "node build",
 		"build:lib": "tsc -b",
-		"build:dist": "rollup -c rollup.config.js",
+		"build:dist": "rollup -c rollup.config.mjs",
 		"prebuild:api": "api-extractor run --local --verbose --config api-extractor.offline.json",
 		"build:api": "api-extractor run --local --verbose --config api-extractor.iconify.json",
 		"test": "jest --runInBand"
@@ -45,20 +45,21 @@
 		"@iconify/types": "workspace:^"
 	},
 	"devDependencies": {
-		"@babel/preset-env": "^7.19.0",
+		"@babel/preset-env": "^7.20.2",
 		"@iconify/core": "workspace:^",
 		"@iconify/utils": "workspace:^",
-		"@microsoft/api-extractor": "^7.30.0",
+		"@microsoft/api-extractor": "^7.33.7",
 		"@rollup/plugin-node-resolve": "^13.3.0",
-		"@types/jest": "^29.0.0",
+		"@types/jest": "^29.2.4",
 		"@vue/test-utils": "^1.3.0",
 		"@vue/vue2-jest": "^29.0.0",
-		"babel-jest": "^29.0.2",
+		"babel-jest": "^29.3.1",
-		"jest": "^29.0.2",
+		"jest": "^29.3.1",
 		"jest-environment-jsdom": "^29.3.1",
-		"rollup": "^2.79.0",
+		"rollup": "^2.79.1",
-		"typescript": "^4.8.2",
+		"typescript": "^4.9.4",
-		"vue": "^2.7.10"
+		"vue": "^2.7.14",
+		"vue-template-compiler": "^2.7.14"
 	},
 	"peerDependencies": {
 		"vue": "2.x"

components/vue2/src/render.ts

@@ -58,7 +58,7 @@ export const render = (
 	const componentProps = { ...svgDefaults };
 
 	// Style in Vue 2 components is always passed to rendered component, so no point in parsing it
-	const style: Record<string, unknown> = {};
+	const style = {} as Record<string, string>;
 
 	// Get element properties
 	for (let key in props) {

iconify-icon/icon/package.json

@@ -24,7 +24,7 @@
 		"build": "node build",
 		"build:api": "api-extractor run --local --verbose",
 		"build:lib": "tsc -b",
-		"build:dist": "rollup -c rollup.config.js",
+		"build:dist": "rollup -c rollup.config.mjs",
 		"test:jest": "jest --runInBand",
 		"test:mjs": "cross-env NODE_OPTIONS=--experimental-vm-modules node tests/import-test.mjs",
 		"test": "pnpm run test:jest && pnpm run test:mjs"
@@ -56,21 +56,21 @@
 	"devDependencies": {
 		"@iconify/core": "workspace:^",
 		"@iconify/utils": "workspace:^",
-		"@microsoft/api-extractor": "^7.30.0",
+		"@microsoft/api-extractor": "^7.33.7",
-		"@rollup/plugin-node-resolve": "^14.0.0",
+		"@rollup/plugin-node-resolve": "^15.0.1",
-		"@rollup/plugin-replace": "^4.0.0",
+		"@rollup/plugin-replace": "^5.0.2",
-		"@types/jest": "^29.0.0",
+		"@types/jest": "^29.2.4",
-		"@types/jsdom": "^20.0.0",
+		"@types/jsdom": "^20.0.1",
-		"@types/node": "^18.7.15",
+		"@types/node": "^18.11.17",
-		"@typescript-eslint/eslint-plugin": "^5.36.2",
+		"@typescript-eslint/eslint-plugin": "^5.47.0",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.23.0",
+		"eslint": "^8.30.0",
-		"jest": "^29.0.2",
+		"jest": "^29.3.1",
-		"jsdom": "^20.0.0",
+		"jsdom": "^20.0.3",
 		"rimraf": "^3.0.2",
-		"rollup": "^2.79.0",
+		"rollup": "^3.8.1",
 		"rollup-plugin-terser": "^7.0.2",
-		"ts-jest": "^29.0.0-next.1",
+		"ts-jest": "^29.0.3",
-		"typescript": "^4.8.2"
+		"typescript": "^4.9.4"
 	}
 }

iconify-icon/react/package.json

@@ -38,16 +38,16 @@
 		"iconify-icon": "workspace:^"
 	},
 	"devDependencies": {
-		"@types/react": "^17.0.49",
+		"@types/react": "^18.0.26",
 		"@types/react-test-renderer": "^18.0.0",
-		"@vitejs/plugin-react": "^2.1.0",
+		"@vitejs/plugin-react": "^3.0.0",
-		"jest": "^29.0.2",
+		"jest": "^29.3.1",
 		"react": "^18.2.0",
 		"react-test-renderer": "^18.2.0",
 		"rimraf": "^3.0.2",
-		"tsup": "^6.2.3",
+		"tsup": "^6.5.0",
-		"typescript": "^4.8.2",
+		"typescript": "^4.9.4",
-		"vitest": "^0.23.1"
+		"vitest": "^0.26.2"
 	},
 	"peerDependencies": {
 		"react": ">=16"

iconify-icon/solid/package.json

@@ -25,8 +25,8 @@
 	},
 	"devDependencies": {
 		"rimraf": "^3.0.2",
-		"solid-js": "^1.5.4",
+		"solid-js": "^1.6.6",
-		"typescript": "^4.8.2"
+		"typescript": "^4.9.4"
 	},
 	"peerDependencies": {
 		"solid-js": ">=1"

package.json

@@ -4,14 +4,13 @@
 	"description": "The most versatile icon framework",
 	"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
 	"license": "MIT",
-	"main": "./monorepo/index.js",
 	"bugs": "https://github.com/iconify/iconify/issues",
 	"homepage": "https://iconify.design/",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/iconify/iconify.git"
 	},
-	"packageManager": "pnpm@7.3.0",
+	"packageManager": "pnpm@7.19.0",
 	"scripts": {
 		"clean": "rm -rf */*/node_modules",
 		"build": "pnpm recursive --filter \"./(packages|iconify-icon|components)/**\" run build",

packages/api-redundancy/package.json

@@ -28,13 +28,13 @@
 		"directory": "packages/api-redundancy"
 	},
 	"devDependencies": {
-		"@types/jest": "^29.0.0",
+		"@types/jest": "^29.2.4",
-		"@types/node": "^18.7.15",
+		"@types/node": "^18.11.17",
-		"@typescript-eslint/eslint-plugin": "^5.36.2",
+		"@typescript-eslint/eslint-plugin": "^5.47.0",
-		"@typescript-eslint/parser": "^5.36.2",
+		"@typescript-eslint/parser": "^5.47.0",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.23.0",
+		"eslint": "^8.30.0",
-		"tsup": "^6.2.3",
+		"tsup": "^6.5.0",
-		"vitest": "^0.23.1"
+		"vitest": "^0.26.2"
 	}
 }

packages/core/package.json

@@ -133,16 +133,16 @@
 		"@iconify/utils": "workspace:^"
 	},
 	"devDependencies": {
-		"@types/jest": "^29.0.0",
+		"@types/jest": "^29.2.4",
-		"@types/node": "^18.7.15",
+		"@types/node": "^18.11.17",
-		"@typescript-eslint/eslint-plugin": "^5.36.2",
+		"@typescript-eslint/eslint-plugin": "^5.47.0",
 		"cross-fetch": "^3.1.5",
-		"eslint": "^8.23.0",
+		"eslint": "^8.30.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-prettier": "^4.2.1",
 		"rimraf": "^3.0.2",
-		"typescript": "^4.8.2",
+		"typescript": "^4.9.4",
-		"unbuild": "^0.8.10",
+		"unbuild": "^1.0.2",
-		"vitest": "^0.23.1"
+		"vitest": "^0.26.2"
 	}
 }

packages/types/package.json

@@ -18,6 +18,6 @@
 		"directory": "packages/types"
 	},
 	"devDependencies": {
-		"typescript": "^4.8.2"
+		"typescript": "^4.9.4"
 	}
 }

packages/utils/package.json

@@ -374,7 +374,7 @@
 	],
 	"dependencies": {
 		"@antfu/install-pkg": "^0.1.1",
-		"@antfu/utils": "^0.5.2",
+		"@antfu/utils": "^0.7.2",
 		"@iconify/types": "workspace:^",
 		"debug": "^4.3.4",
 		"kolorist": "^1.6.0",
@@ -384,13 +384,13 @@
 		"@iconify-json/flat-color-icons": "^1.1.3",
 		"@types/debug": "^4.1.7",
 		"@types/jest": "^29.2.4",
-		"@typescript-eslint/eslint-plugin": "^5.46.0",
+		"@typescript-eslint/eslint-plugin": "^5.47.0",
-		"eslint": "^8.29.0",
+		"eslint": "^8.30.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-prettier": "^4.2.1",
 		"rimraf": "^3.0.2",
 		"typescript": "^4.9.4",
-		"unbuild": "^0.8.11",
+		"unbuild": "^1.0.2",
-		"vitest": "^0.23.4"
+		"vitest": "^0.26.2"
 	}
 }