feat: automatic xml preface cleanup

demo/browser-tests/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "@iconify-demo/browser-tests",
-	"version": "2.2.0",
+	"version": "2.2.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@iconify-demo/browser-tests",
-			"version": "2.2.0",
+			"version": "2.2.1",
 			"license": "(Apache-2.0 OR GPL-2.0)",
 			"devDependencies": {
 				"@iconify/iconify": "^2.2.1",

packages/api-redundancy/package-lock.json

@@ -7,7 +7,7 @@
 		"": {
 			"name": "@iconify/api-redundancy",
 			"version": "1.1.0",
-			"license": "(Apache-2.0 OR GPL-2.0)",
+			"license": "MIT",
 			"devDependencies": {
 				"@types/jest": "^27.4.1",
 				"@types/node": "^17.0.22",

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,14 @@ describe('Testing FileSystemIconLoader', () => {
 		expect(result && result.indexOf('svg') > -1).toBeTruthy();
 	});
 
+	test('FileSystemIconLoader cleanups svg preface', async () => {
+		const result = await FileSystemIconLoader(fixturesDir)(
+			'circle-xml-preface'
+		);
+		console.log(result);
+		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: {
@@ -61,7 +62,7 @@ describe('Testing loadIcon', () => {
 		expect(result && result.indexOf('height="1em"') > -1).toBeTruthy();
 	});
 
-	test('CustomCollection Icon with XML heading', async () => {
+	test.skip('CustomCollection Icon with XML heading', async () => {
 		const svg = await loader('1f3eb');
 		expect(svg).toBeTruthy();
 		// Intercept console.warn