From e506d768435529f683ebfdde9838c29d2228cc1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez=20Jim=C3=A9nez?=
 <joaquin.sanchez@fi2net.es>
Date: Mon, 21 Mar 2022 18:28:10 +0100
Subject: [PATCH] feat(next): add trim for custom svg icons

---
 packages/utils/src/loader/custom.ts          | 2 ++
 packages/utils/src/loader/modern.ts          | 1 +
 packages/utils/src/loader/types.ts           | 9 +++++++++
 packages/utils/src/loader/utils.ts           | 6 ++++--
 packages/utils/src/svg/encode-svg-for-css.ts | 6 +++++-
 packages/utils/src/svg/trim.ts               | 2 +-
 6 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/utils/src/loader/custom.ts b/packages/utils/src/loader/custom.ts
index c714bc7..a7eb746 100644
--- a/packages/utils/src/loader/custom.ts
+++ b/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
 		);
diff --git a/packages/utils/src/loader/modern.ts b/packages/utils/src/loader/modern.ts
index 36bc4cc..ad6fe79 100644
--- a/packages/utils/src/loader/modern.ts
+++ b/packages/utils/src/loader/modern.ts
@@ -33,6 +33,7 @@ export async function searchForIcon(
 				`<svg >${body}</svg>`,
 				collection,
 				id,
+				false,
 				options,
 				() => attributes
 			);
diff --git a/packages/utils/src/loader/types.ts b/packages/utils/src/loader/types.ts
index b5474c4..8d5c51e 100644
--- a/packages/utils/src/loader/types.ts
+++ b/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;
 };
 
 /**
diff --git a/packages/utils/src/loader/utils.ts b/packages/utils/src/loader/utils.ts
index 4ad4a4c..d4706fa 100644
--- a/packages/utils/src/loader/utils.ts
+++ b/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;
 }
diff --git a/packages/utils/src/svg/encode-svg-for-css.ts b/packages/utils/src/svg/encode-svg-for-css.ts
index 37122ef..b27b6be 100644
--- a/packages/utils/src/svg/encode-svg-for-css.ts
+++ b/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:')) {
diff --git a/packages/utils/src/svg/trim.ts b/packages/utils/src/svg/trim.ts
index c1c0a6a..137a446 100644
--- a/packages/utils/src/svg/trim.ts
+++ b/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