parseSVGContent()

This function is part of Iconify Utils package.

Function parseSVGContent() parses string that contains SVG, extracts attributes for <svg> element and icon content.

Usage

This function has the following parameter:

• content, string. SVG.

This function returns data with type ParsedSVGContent, undefined on error. See below.

Result

The result is an object with the following properties:

• body, string. Icon content.
• attributes, object. Attributes for <svg> element.

Attributes are not checked.

The result should be passed to either buildParsedSVG() or convertParsedSVG(). Both functions do simple validation of attributes in <svg> element and convert it to usable data.

Iconify Tools

This function is very basic. For advanced parsing and clean up, use Iconify Tools.

Examples

Example using parseSVGContent() with buildParsedSVG() and iconToHTML() to clean up icon:

cleanup.ts

tsimport { buildParsedSVG, parseSVGContent, iconToHTML } from '@iconify/utils';

// Source SVG with many attributes on <svg> element
const svg = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-3d-rotate" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
 <path d="M12 3a7 7 0 0 1 7 7v4l-3 -3" />
 <path d="M22 11l-3 3" />
 <path d="M8 15.5l-5 -3l5 -3l5 3v5.5l-5 3z" />
 <path d="M3 12.5v5.5l5 3" />
 <path d="M8 15.545l5 -3.03" />
</svg>`

// Split SVG in <svg> attributes and body
const parsed = parseSVGContent(svg);
if (!parsed) {
   throw new Error('Invalid icon')
}

// Validate and clean up attributes, return object with attributes and body
const built = buildParsedSVG(parsed);
if (!built) {
   throw new Error('Invalid icon')
}

/*
{
 attributes: { width: '24', height: '24', viewBox: '0 0 24 24' },
 viewBox: [ 0, 0, 24, 24 ],
 body: '<g stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a7 7 0 0 1 7 7v4l-3 -3" />\n' +
   '  <path d="M22 11l-3 3" />\n' +
   '  <path d="M8 15.5l-5 -3l5 -3l5 3v5.5l-5 3z" />\n' +
   '  <path d="M3 12.5v5.5l5 3" />\n' +
   '  <path d="M8 15.545l5 -3.03" /></g>'
}
*/

// Build cleaned-up SVG
const html = iconToHTML(built.body, built.attributes);
console.log(html);

/*

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 <g stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path d="M12 3a7 7 0 0 1 7 7v4l-3 -3" />
   <path d="M22 11l-3 3" />
   <path d="M8 15.5l-5 -3l5 -3l5 3v5.5l-5 3z" />
   <path d="M3 12.5v5.5l5 3" />
   <path d="M8 15.545l5 -3.03" />
 </g>
</svg>

*/

Example using parseSVGContent() with convertParsedSVG() to get icon data in IconifyIcon format, which can be used by various icon components:

convert.ts

tsimport { convertParsedSVG, parseSVGContent } from '@iconify/utils';

// Source SVG with many attributes on <svg> element
const svg = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-3d-rotate" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
 <path d="M12 3a7 7 0 0 1 7 7v4l-3 -3" />
 <path d="M22 11l-3 3" />
 <path d="M8 15.5l-5 -3l5 -3l5 3v5.5l-5 3z" />
 <path d="M3 12.5v5.5l5 3" />
 <path d="M8 15.545l5 -3.03" />
</svg>`

// Split SVG in <svg> attributes and body
const parsed = parseSVGContent(svg);
if (!parsed) {
   throw new Error('Invalid icon')
}

// Validate and clean up attributes, return IconifyIcon object
const icon = convertParsedSVG(parsed);
if (!icon) {
   throw new Error('Invalid icon')
}

console.log(icon);

/*

{
 left: 0,
 top: 0,
 width: 24,
 height: 24,
 body: '<g stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a7 7 0 0 1 7 7v4l-3 -3" />\n' +
   '  <path d="M22 11l-3 3" />\n' +
   '  <path d="M8 15.5l-5 -3l5 -3l5 3v5.5l-5 3z" />\n' +
   '  <path d="M3 12.5v5.5l5 3" />\n' +
   '  <path d="M8 15.545l5 -3.03" /></g>'
}

*/