Merge remote-tracking branch 'origin/master' into next

packages/utils/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "@iconify/utils",
-	"version": "1.0.32",
+	"version": "1.0.33",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@iconify/utils",
-			"version": "1.0.32",
+			"version": "1.0.33",
 			"license": "MIT",
 			"dependencies": {
 				"@antfu/install-pkg": "^0.1.0",

packages/utils/package.json

@@ -3,7 +3,7 @@
 	"type": "module",
 	"description": "Common functions for working with Iconify icon sets used by various packages.",
 	"author": "Vjacheslav Trushkin",
-	"version": "1.0.32",
+	"version": "1.0.33",
 	"license": "MIT",
 	"bugs": "https://github.com/iconify/iconify/issues",
 	"homepage": "https://iconify.design/",

packages/utils/src/loader/custom.ts

@@ -30,17 +30,21 @@ export async function getCustomIcon(
 	}
 
 	if (result) {
+		const cleanupIdx = result.indexOf('<svg');
+		if (cleanupIdx > 0) result = result.slice(cleanupIdx);
+		const { transform } = options?.customizations ?? {};
+		result =
+			typeof transform === 'function'
+				? await transform(result, collection, icon)
+				: result;
+
 		if (!result.startsWith('<svg')) {
 			console.warn(
 				`Custom icon "${icon}" in "${collection}" is not a valid SVG`
 			);
 			return result;
 		}
-		const { transform } = options?.customizations ?? {};
+
-		result =
-			typeof transform === 'function'
-				? await transform(result, collection, icon)
-				: result;
 		return await mergeIconProps(
 			options?.customizations?.trimCustomSvg === true
 				? trimSVG(result)

packages/utils/src/loader/node-loaders.ts

@@ -25,7 +25,9 @@ export function FileSystemIconLoader(
 				continue;
 			}
 			if (stat.isFile()) {
-				const svg = await fs.readFile(path, 'utf-8');
+				let svg = await fs.readFile(path, 'utf-8');
+				const cleanupIdx = svg.indexOf('<svg');
+				if (cleanupIdx > 0) svg = svg.slice(cleanupIdx);
 				return typeof transform === 'function'
 					? await transform(svg)
 					: svg;

packages/utils/tests/file-system-icon-test.ts

@@ -8,6 +8,13 @@ describe('Testing FileSystemIconLoader', () => {
 		expect(result && result.indexOf('svg') > -1).toBeTruthy();
 	});
 
+	test('FileSystemIconLoader cleanups svg preface', async () => {
+		const result = await FileSystemIconLoader(fixturesDir)(
+			'circle-xml-preface'
+		);
+		expect(result && result.indexOf('<svg') === 0).toBeTruthy();
+	});
+
 	test('FileSystemIconLoader with transform', async () => {
 		const result = await FileSystemIconLoader(fixturesDir, (icon) => {
 			return icon.replace('<svg ', '<svg width="1em" height="1em" ');

packages/utils/tests/fixtures/circle-xml-preface.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><circle cx="60" cy="60" r="50"/></svg>

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

@@ -35,6 +35,21 @@ describe('Testing getCustomIcon', () => {
 		);
 	});
 
+	test('CustomIconLoader cleanups svg preface', async () => {
+		const svg = `<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
+<circle cx="60" cy="60" r="50"/>
+</svg>
+`;
+		const result = await getCustomIcon(() => svg, 'a', 'b', {
+			customizations: { trimCustomSvg: true },
+		});
+		expect(result).toEqual(
+			'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="60" r="50"/></svg>'
+		);
+	});
+
 	test("CustomIconLoader with transform: scale/width/height shouldn't take effect", async () => {
 		const svg = await fs.readFile(fixturesDir + '/circle.svg', 'utf8');
 		const options: IconifyLoaderOptions = {
@@ -66,7 +81,7 @@ describe('Testing getCustomIcon', () => {
 		expect(usedProps.height).toEqual('4em');
 	});
 
-	test('Icon with XML heading', async () => {
+	test.skip('Icon with XML heading', async () => {
 		// Intercept console.warn
 		let warned = false;
 		const warn = console.warn;

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

@@ -24,6 +24,7 @@ describe('Testing loadIcon', () => {
 	});
 
 	test('CustomCollection using dynamic import', async () => {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
 		const result = await loadIcon('flat-color-icons', 'up-right', {
 			customCollections: {
@@ -82,7 +83,15 @@ describe('Testing loadIcon', () => {
 		// Restore console.warn
 		console.warn = warn;
 
-		expect(svg).toEqual(result);
+		expect(svg).not.toEqual(result);
-		expect(warned).toEqual(true);
+		expect(
+			svg?.replace(
+				'<?xml version="1.0" encoding="UTF-8" standalone="no"?>',
+				''
+			)
+		).toEqual(result);
+
+		// warning should not longer be used
+		expect(warned).toEqual(false);
 	});
 });