chore: move svg style and class logic to mergeIconProps

packages/utils/src/loader/custom.ts

@@ -31,20 +31,13 @@ export async function getCustomIcon(
 			);
 			return result;
 		}
-		const {
-			transform,
-			additionalProps = {},
-			iconCustomizer,
-		} = options?.customizations ?? {};
+		const { transform } = options?.customizations ?? {};
 		return await mergeIconProps(
-			transform ? await transform(result) : result,
+			typeof transform === 'function' ? await transform(result) : result,
 			collection,
 			icon,
-			additionalProps,
-			options?.addXmlNs === true,
-			options?.scale,
+			options,
 			undefined,
-			iconCustomizer,
 		);
 	}
 }

packages/utils/src/loader/loader.ts

@@ -23,20 +23,7 @@ export async function loadIcon(
 		return undefined;
 	}
 
-	let svg = await loadNodeBuiltinIcon(collection, icon, options);
-
-	if (svg && options) {
-		const { defaultStyle, defaultClass } = options
-		// additional props and iconCustomizer takes precedence
-		if (defaultClass && !svg.includes(' class='))
-			svg = svg.replace('<svg ', `<svg class="${defaultClass}" `)
-		// additional props and iconCustomizer takes precedence
-		if (defaultStyle && !svg.includes(' style='))
-			svg = svg.replace('<svg ', `<svg style="${defaultStyle}" `)
-	}
-
-
-	return svg;
+	return await loadNodeBuiltinIcon(collection, icon, options);
 }
 
 async function importFsModule(): Promise<typeof import('./fs') | undefined> {

packages/utils/src/loader/modern.ts

@@ -16,11 +16,7 @@ export async function searchForIcon(
 	options?: IconifyLoaderOptions,
 ): Promise<string | undefined> {
 	let iconData: FullIconifyIcon | null;
-	const {
-		customize,
-		additionalProps = {},
-		iconCustomizer,
-	} = options?.customizations ?? {};
+	const { customize } = options?.customizations ?? {};
 	for (const id of ids) {
 		iconData = getIconData(iconSet, id, true);
 		if (iconData) {
@@ -37,11 +33,8 @@ export async function searchForIcon(
 				`<svg >${body}</svg>`,
 				collection,
 				id,
-				additionalProps,
-				options?.addXmlNs === true,
-				options?.scale,
+				options,
 				() => attributes,
-				iconCustomizer
 			);
 		}
 	}

packages/utils/src/loader/utils.ts

@@ -1,16 +1,18 @@
 import type { Awaitable } from '@antfu/utils';
-import type { IconCustomizer } from './types';
+import type { IconifyLoaderOptions } from './types';
 
 export async function mergeIconProps(
 	svg: string,
 	collection: string,
 	icon: string,
-	additionalProps: Record<string, string | undefined>,
-	addXmlNs: boolean,
-	scale?: number,
+	options?: IconifyLoaderOptions,
 	propsProvider?: () => Awaitable<Record<string, string>>,
-	iconCustomizer?: IconCustomizer,
 ): Promise<string> {
+	const { scale, addXmlNs = false } = options ?? {}
+	const {
+		additionalProps = {},
+		iconCustomizer,
+	} = options?.customizations ?? {};
 	const props: Record<string, string> = (await propsProvider?.()) ?? {};
 	if (!svg.includes(" width=") && !svg.includes(" height=") && typeof scale === 'number') {
 		if ((typeof props.width === 'undefined' || props.width === null) && (typeof props.height === 'undefined' || props.height === null)) {
@@ -18,6 +20,7 @@ export async function mergeIconProps(
 			props.height = `${scale}em`;
 		}
 	}
+
 	await iconCustomizer?.(collection, icon, props);
 	Object.keys(additionalProps).forEach((p) => {
 		const v = additionalProps[p];
@@ -35,8 +38,22 @@ export async function mergeIconProps(
 		}
 	}
 
-	return svg.replace(
+	svg = svg.replace(
 		'<svg ',
 		`<svg ${Object.keys(props).map((p) => `${p}="${props[p]}"`).join(' ')}`
 	);
+
+	if (svg && options) {
+		const { defaultStyle, defaultClass } = options
+		// additional props and iconCustomizer takes precedence
+		if (defaultClass && !svg.includes(' class=')) {
+			svg = svg.replace('<svg ', `<svg class="${defaultClass}" `);
+		}
+		// additional props and iconCustomizer takes precedence
+		if (defaultStyle && !svg.includes(' style=')) {
+			svg = svg.replace('<svg ', `<svg style="${defaultStyle}" `);
+		}
+	}
+
+	return svg;
 }