chore: add convertParsedSVG to utils, add new functions to index

packages/utils/src/index.ts

@@ -53,6 +53,7 @@ export { convertIconSetInfo } from './icon-set/convert-info';
 // Build SVG
 export { iconToSVG } from './svg/build';
 export type { IconifyIconBuildResult } from './svg/build';
+export { splitSVGDefs, mergeDefsAndContent, wrapSVGContent } from './svg/defs';
 export { replaceIDs } from './svg/id';
 export { calculateSize } from './svg/size';
 export { encodeSvgForCss } from './svg/encode-svg-for-css';
@@ -60,6 +61,10 @@ export { trimSVG } from './svg/trim';
 export { iconToHTML } from './svg/html';
 export { svgToURL, svgToData } from './svg/url';
 export { cleanUpInnerHTML } from './svg/inner-html';
+export { getSVGViewBox } from './svg/viewbox';
+export type { SVGViewBox } from './svg/viewbox';
+export { parseSVGContent, buildParsedSVG, convertParsedSVG } from './svg/parse';
+export type { ParsedSVGContent } from './svg/parse';
 
 // Colors
 export { colorKeywords } from './colors/keywords';

packages/utils/src/svg/parse.ts

@@ -1,6 +1,7 @@
+import { IconifyIcon } from '@iconify/types';
 import { IconifyIconBuildResult } from './build';
 import { wrapSVGContent } from './defs';
-import { getSVGViewBox } from './viewbox';
+import { SVGViewBox, getSVGViewBox } from './viewbox';
 
 /**
  * Parsed SVG content
@@ -44,12 +45,14 @@ export function parseSVGContent(content: string): ParsedSVGContent | undefined {
 	};
 }
 
-/**
- * Convert parsed SVG to IconifyIconBuildResult
- */
-export function buildParsedSVG(
-	data: ParsedSVGContent
-): IconifyIconBuildResult | undefined {
+interface BuildResult {
+	width?: string;
+	height?: string;
+	viewBox: SVGViewBox;
+	body: string;
+}
+
+function build(data: ParsedSVGContent): BuildResult | undefined {
 	const attribs = data.attribs;
 	const viewBox = getSVGViewBox(attribs['viewBox'] ?? '');
 	if (!viewBox) {
@@ -79,14 +82,51 @@ export function buildParsedSVG(
 	}
 
 	return {
-		attributes: {
 		// Copy dimensions if exist
 		width: attribs.width,
 		height: attribs.height,
-			// Merge viewBox
-			viewBox: viewBox.join(' '),
-		},
 		viewBox,
 		body,
 	};
 }
+
+/**
+ * Convert parsed SVG to IconifyIconBuildResult
+ */
+export function buildParsedSVG(
+	data: ParsedSVGContent
+): IconifyIconBuildResult | undefined {
+	const result = build(data);
+	if (result) {
+		return {
+			attributes: {
+				// Copy dimensions if exist
+				width: result.width,
+				height: result.height,
+				// Merge viewBox
+				viewBox: result.viewBox.join(' '),
+			},
+			viewBox: result.viewBox,
+			body: result.body,
+		};
+	}
+}
+
+/**
+ * Convert parsed SVG to IconifyIcon
+ */
+export function convertParsedSVG(
+	data: ParsedSVGContent
+): IconifyIcon | undefined {
+	const result = build(data);
+	if (result) {
+		const viewBox = result.viewBox;
+		return {
+			left: viewBox[0],
+			top: viewBox[1],
+			width: viewBox[2],
+			height: viewBox[3],
+			body: result.body,
+		};
+	}
+}

packages/utils/tests/parse-svg-test.ts

@@ -1,8 +1,13 @@
 import { IconifyIconBuildResult } from '../lib/svg/build';
-import { parseSVGContent, buildParsedSVG } from '../lib/svg/parse';
+import {
+	parseSVGContent,
+	buildParsedSVG,
+	convertParsedSVG,
+} from '../lib/svg/parse';
 import { splitSVGDefs } from '../lib/svg/defs';
 import { getSVGViewBox } from '../lib/svg/viewbox';
 import { readFileSync } from 'node:fs';
+import { IconifyIcon } from '@iconify/types';
 
 const fixturesDir = './tests/fixtures';
 
@@ -55,6 +60,16 @@ describe('Testing parsing SVG content', () => {
 		};
 		expect(built).toEqual(expected);
 
+		const icon = convertParsedSVG(parsed);
+		const expectedIcon: IconifyIcon = {
+			left: 0,
+			top: 0,
+			width: 24,
+			height: 24,
+			body,
+		};
+		expect(icon).toEqual(expectedIcon);
+
 		// Defs
 		expect(splitSVGDefs(body)).toEqual({
 			defs: '',
@@ -109,7 +124,7 @@ describe('Testing parsing SVG content', () => {
 		const body = `${body1}<defs id="defs6">${defs1}</defs>${body2}`;
 		const svg = `
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.5 47.5" style="enable-background:new 0 0 47.5 47.5;" xml:space="preserve" version="1.1" id="svg2">
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 -1 47.5 49.5" style="enable-background:new 0 -1 47.5 49.5;" xml:space="preserve" version="1.1" id="svg2">
     ${body}
 </svg>`;
 
@@ -125,8 +140,8 @@ describe('Testing parsing SVG content', () => {
 			'xmlns:rdf': 'http://www.w3.org/1999/02/22-rdf-syntax-ns#',
 			'xmlns:svg': 'http://www.w3.org/2000/svg',
 			'xmlns': 'http://www.w3.org/2000/svg',
-			'viewBox': '0 0 47.5 47.5',
-			'style': 'enable-background:new 0 0 47.5 47.5;',
+			'viewBox': '0 -1 47.5 49.5',
+			'style': 'enable-background:new 0 -1 47.5 49.5;',
 			'xml:space': 'preserve',
 			'version': '1.1',
 			'id': 'svg2',
@@ -137,13 +152,23 @@ describe('Testing parsing SVG content', () => {
 		const built = buildParsedSVG(parsed);
 		const expected: IconifyIconBuildResult = {
 			attributes: {
-				viewBox: '0 0 47.5 47.5',
+				viewBox: '0 -1 47.5 49.5',
 			},
-			viewBox: [0, 0, 47.5, 47.5],
-			body: `<defs>${defs1}</defs><g style="enable-background:new 0 0 47.5 47.5;">${body1}${body2}</g>`,
+			viewBox: [0, -1, 47.5, 49.5],
+			body: `<defs>${defs1}</defs><g style="enable-background:new 0 -1 47.5 49.5;">${body1}${body2}</g>`,
 		};
 		expect(built).toEqual(expected);
 
+		const icon = convertParsedSVG(parsed);
+		const expectedIcon: IconifyIcon = {
+			left: 0,
+			top: -1,
+			width: 47.5,
+			height: 49.5,
+			body: expected.body,
+		};
+		expect(icon).toEqual(expectedIcon);
+
 		// Defs
 		expect(splitSVGDefs(body)).toEqual({
 			defs: defs1,