feat: provide collection and icon names to transform customization

packages/utils/src/loader/custom.ts

@@ -38,7 +38,9 @@ export async function getCustomIcon(
 		}
 		const { transform } = options?.customizations ?? {};
 		result =
-			typeof transform === 'function' ? await transform(result) : result;
+			typeof transform === 'function'
+				? await transform(result, collection, icon)
+				: result;
 		return await mergeIconProps(
 			options?.customizations?.trimCustomSvg === true
 				? trimSVG(result)

packages/utils/src/loader/types.ts

@@ -42,9 +42,15 @@ export type IconCustomizations = {
 	 * **WARNING**: `transform` will be only applied when using `custom` icon collection: it will be applied only when using `getCustomIcon` and excluded when using `searchForIcon`.
 	 *
 	 * @param svg The loaded `svg`
+	 * @param collection The name of the collection
+	 * @param icon The name of the icon
 	 * @return The transformed `svg`.
 	 */
-	transform?: (svg: string) => Awaitable<string>;
+	transform?: (
+		svg: string,
+		collection: string,
+		icon: string
+	) => Awaitable<string>;
 	/**
 	 * Change default icon customizations values.
 	 *

packages/utils/tests/get-custom-icon-test.ts

@@ -44,8 +44,8 @@ describe('Testing getCustomIcon', () => {
 					width: '4em',
 					height: '4em',
 				},
-				transform(icon) {
+				transform(svg) {
-					return icon.replace(
+					return svg.replace(
 						'<svg ',
 						'<svg width="1em" height="1em" '
 					);

packages/utils/tests/iconify-icon-test.ts

@@ -46,8 +46,8 @@ describe('Testing loadIcon with @iconify-json/flat-color-icons>', () => {
 					class: 'clazz2',
 				},
 				// it will never be called, it is not a custom icon
-				transform(icon) {
+				transform(svg) {
-					return icon.replace(
+					return svg.replace(
 						'<svg ',
 						'<svg width="4em" height="4em" '
 					);
@@ -72,8 +72,8 @@ describe('Testing loadIcon with @iconify-json/flat-color-icons>', () => {
 					class: 'clazz2',
 				},
 				// it will never be called, it is not a custom icon
-				transform(icon) {
+				transform(svg) {
-					return icon.replace(
+					return svg.replace(
 						'<svg ',
 						'<svg width="4em" height="4em" '
 					);

packages/utils/tests/load-icon-test.ts

@@ -48,8 +48,8 @@ describe('Testing loadIcon', () => {
 				},
 			},
 			customizations: {
-				transform(icon) {
+				transform(svg) {
-					return icon.replace(
+					return svg.replace(
 						'<svg ',
 						'<svg width="1em" height="1em" '
 					);