From 78f9ae1c122a94b81742963be16a1a6856c82e5c Mon Sep 17 00:00:00 2001
From: Vjacheslav Trushkin <cyberalien@gmail.com>
Date: Fri, 6 Jan 2023 14:43:22 +0200
Subject: [PATCH] fix(utils): do not assume that attributes are separated with
 spaces in loader

---
 packages/utils/src/loader/utils.ts            | 15 ++++++++-------
 packages/utils/tests/file-system-icon-test.ts |  2 +-
 packages/utils/tests/fixtures/circle.svg      |  7 ++++++-
 packages/utils/tests/get-custom-icon-test.ts  |  2 +-
 packages/utils/tests/load-icon-test.ts        |  2 +-
 5 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/utils/src/loader/utils.ts b/packages/utils/src/loader/utils.ts
index 3cb1c47..7a42194 100644
--- a/packages/utils/src/loader/utils.ts
+++ b/packages/utils/src/loader/utils.ts
@@ -3,6 +3,7 @@ import type { IconifyLoaderOptions } from './types';
 
 const svgWidthRegex = /width\s*=\s*["'](\w+)["']/;
 const svgHeightRegex = /height\s*=\s*["'](\w+)["']/;
+const svgTagRegex = /<svg\s+/;
 
 function configureSvgSize(
 	svg: string,
@@ -59,12 +60,12 @@ export async function mergeIconProps(
 	// add xml namespaces if necessary
 	if (addXmlNs) {
 		// add svg xmlns if missing
-		if (!svg.includes(' xmlns=') && !props['xmlns']) {
+		if (!svg.includes('xmlns=') && !props['xmlns']) {
 			props['xmlns'] = 'http://www.w3.org/2000/svg';
 		}
 		// add xmlns:xlink if xlink present and the xmlns missing
 		if (
-			!svg.includes(' xmlns:xlink=') &&
+			!svg.includes('xmlns:xlink=') &&
 			svg.includes('xlink:') &&
 			!props['xmlns:xlink']
 		) {
@@ -80,18 +81,18 @@ export async function mergeIconProps(
 		)
 		.filter((p) => p != null);
 	if (propsToAdd.length) {
-		svg = svg.replace('<svg ', `<svg ${propsToAdd.join(' ')} `);
+		svg = svg.replace(svgTagRegex, `<svg ${propsToAdd.join(' ')} `);
 	}
 
 	if (options) {
 		const { defaultStyle, defaultClass } = options;
 		// additional props and iconCustomizer takes precedence
-		if (defaultClass && !svg.includes(' class=')) {
-			svg = svg.replace('<svg ', `<svg class="${defaultClass}" `);
+		if (defaultClass && !svg.includes('class=')) {
+			svg = svg.replace(svgTagRegex, `<svg class="${defaultClass}" `);
 		}
 		// additional props and iconCustomizer takes precedence
-		if (defaultStyle && !svg.includes(' style=')) {
-			svg = svg.replace('<svg ', `<svg style="${defaultStyle}" `);
+		if (defaultStyle && !svg.includes('style=')) {
+			svg = svg.replace(svgTagRegex, `<svg style="${defaultStyle}" `);
 		}
 	}
 
diff --git a/packages/utils/tests/file-system-icon-test.ts b/packages/utils/tests/file-system-icon-test.ts
index 3eb60c4..9c1e41f 100644
--- a/packages/utils/tests/file-system-icon-test.ts
+++ b/packages/utils/tests/file-system-icon-test.ts
@@ -17,7 +17,7 @@ describe('Testing FileSystemIconLoader', () => {
 
 	test('FileSystemIconLoader with transform', async () => {
 		const result = await FileSystemIconLoader(fixturesDir, (icon) => {
-			return icon.replace('<svg ', '<svg width="1em" height="1em" ');
+			return icon.replace(/<svg\s+/, '<svg width="1em" height="1em" ');
 		})('circle');
 		expect(result && result.indexOf('width="1em"') > -1).toBeTruthy();
 		expect(result && result.indexOf('height="1em"') > -1).toBeTruthy();
diff --git a/packages/utils/tests/fixtures/circle.svg b/packages/utils/tests/fixtures/circle.svg
index e4e7959..991f43b 100644
--- a/packages/utils/tests/fixtures/circle.svg
+++ b/packages/utils/tests/fixtures/circle.svg
@@ -1 +1,6 @@
-<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><circle cx="60" cy="60" r="50"/></svg>
+<svg
+    viewBox="0 0 120 120"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <circle cx="60" cy="60" r="50"/>
+</svg>
diff --git a/packages/utils/tests/get-custom-icon-test.ts b/packages/utils/tests/get-custom-icon-test.ts
index 697a1bb..8e4a686 100644
--- a/packages/utils/tests/get-custom-icon-test.ts
+++ b/packages/utils/tests/get-custom-icon-test.ts
@@ -61,7 +61,7 @@ describe('Testing getCustomIcon', () => {
 				},
 				transform(svg) {
 					return svg.replace(
-						'<svg ',
+						/<svg\s+/,
 						'<svg width="1em" height="1em" '
 					);
 				},
diff --git a/packages/utils/tests/load-icon-test.ts b/packages/utils/tests/load-icon-test.ts
index 807888e..2b83d10 100644
--- a/packages/utils/tests/load-icon-test.ts
+++ b/packages/utils/tests/load-icon-test.ts
@@ -51,7 +51,7 @@ describe('Testing loadIcon', () => {
 			customizations: {
 				transform(svg) {
 					return svg.replace(
-						'<svg ',
+						/<svg\s+/,
 						'<svg width="1em" height="1em" '
 					);
 				},