feat(next): add trim for custom svg icons

packages/utils/src/loader/custom.ts

@@ -5,6 +5,7 @@ import type {
 	InlineCollection,
 } from './types';
 import { mergeIconProps } from './utils';
+import { trimSVG } from '../svg/trim';
 
 const debug = createDebugger('@iconify-loader:custom');
 
@@ -40,6 +41,7 @@ export async function getCustomIcon(
 			typeof transform === 'function' ? await transform(result) : result,
 			collection,
 			icon,
+			true,
 			options,
 			undefined
 		);

packages/utils/src/loader/modern.ts

@@ -33,6 +33,7 @@ export async function searchForIcon(
 				`<svg >${body}</svg>`,
 				collection,
 				id,
+				false,
 				options,
 				() => attributes
 			);

packages/utils/src/loader/types.ts

@@ -33,6 +33,7 @@ export type IconCustomizer = (
  * - apply `customize` with default customizations, if provided
  * - apply `iconCustomizer` with `customize` customizations, if provided
  * - apply `additionalProps` with `iconCustomizer` customizations, if provided
+ * - apply `trimSVG` to the final `SVG` only when using custom icon collection and `trimCustomSvg` enabled
  */
 export type IconCustomizations = {
 	/**
@@ -63,6 +64,14 @@ export type IconCustomizations = {
 	 * All properties without value will not be applied.
 	 */
 	additionalProps?: Record<string, string | undefined>;
+	/**
+	 * Should optimize the custom `svg` icon?.
+	 *
+	 * Enable this flag when using custom `SVG` on `CSS`.
+	 *
+	 * @default `false`.
+	 */
+	trimCustomSvg?: boolean;
 };
 
 /**

packages/utils/src/loader/utils.ts

@@ -1,5 +1,6 @@
 import type { Awaitable } from '@antfu/utils';
 import type { IconifyLoaderOptions } from './types';
+import { trimSVG } from '../svg/trim';
 
 const svgWidthRegex = /width\s*=\s*["'](\w+)["']/;
 const svgHeightRegex = /height\s*=\s*["'](\w+)["']/;
@@ -38,6 +39,7 @@ export async function mergeIconProps(
 	svg: string,
 	collection: string,
 	icon: string,
+	customSvg: boolean,
 	options?: IconifyLoaderOptions,
 	propsProvider?: () => Awaitable<Record<string, string>>
 ): Promise<string> {
@@ -81,7 +83,7 @@ export async function mergeIconProps(
 		svg = svg.replace('<svg ', `<svg ${propsToAdd.join(' ')} `);
 	}
 
-	if (svg && options) {
+	if (options) {
 		const { defaultStyle, defaultClass } = options;
 		// additional props and iconCustomizer takes precedence
 		if (defaultClass && !svg.includes(' class=')) {
@@ -107,5 +109,5 @@ export async function mergeIconProps(
 		}
 	}
 
-	return svg;
+	return customSvg && options?.customizations?.trimCustomSvg === true ? trimSVG(svg) : svg;
 }

packages/utils/src/svg/encode-svg-for-css.ts

@@ -1,4 +1,8 @@
-// https://bl.ocks.org/jennyknuth/222825e315d45a738ed9d6e04c7a88d0
+/**
+ * Encode the `SVG` to be used on `CSS`: https://bl.ocks.org/jennyknuth/222825e315d45a738ed9d6e04c7a88d0.
+ *
+ * @param svg The `SVG` source.
+ */
 export function encodeSvgForCss(svg: string): string {
 	let useSvg = svg.startsWith('<svg>') ? svg.replace('<svg>', '<svg >') : svg;
 	if (!useSvg.includes(' xmlns:xlink=') && useSvg.includes(' xlink:')) {

packages/utils/src/svg/trim.ts

@@ -5,7 +5,7 @@ export function trimSVG(str: string): string {
 	return (
 		str
 			// Replace new line only after one of allowed characters that are not part of common attributes
-			.replace(/(["';{}}><])\s*\n\s*/g, '$1')
+			.replace(/(["';{}><])\s*\n\s*/g, '$1')
 			// Keep one space in case it is inside attribute
 			.replace(/\s*\n\s*/g, ' ')
 			// Trim attribute values