Appearance

parseSVGContent() ​

此函数属于 Iconify Utils 包。

函数 parseSVGContent() 用于解析包含 SVG 的字符串，提取 <svg> 元素的属性以及图标内容。

用法 ​

该函数包含以下参数：

  • content，string 类型。SVG 字符串。

该函数返回类型为 ParsedSVGContent 的数据，出错时返回 undefined。详见下文。

返回值 ​

返回值是一个包含以下属性的对象：

  • body，string 类型。图标内容。
  • attributes，object 类型。<svg> 元素的属性。

不会对属性进行校验。

该结果应传递给 buildParsedSVG() 或 convertParsedSVG()。 这两个函数会对 <svg> 元素中的属性进行简单验证，并将其转换为可用数据。

Iconify Tools ​

此函数功能较为基础。如需高级解析和清理功能，请使用 Iconify Tools。

示例 ​

结合使用 parseSVGContent()、buildParsedSVG() 和 iconToHTML() 来清理图标的示例：

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>

*/

结合使用 parseSVGContent() 和 convertParsedSVG() 获取 IconifyIcon 格式图标数据的示例， 该格式可供各种图标组件使用：

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>'
}

*/