Appearance

iconToSVG() ​

此函数属于 Iconify Utils 包。

函数 iconToSVG() 用于生成渲染 SVG 所需的数据。

用法 ​

此函数包含以下参数：

此函数返回类型为 IconifyIconBuildResult 的数据。详见下文。

解析 SVG ​

此函数使用 IconifyIcon 作为数据源。 如果您想解析包含 SVG 的字符串，请改用 parseSVGContent() 和 buildParsedSVG() 函数。

结果 ​

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

  • body，string。图标内容。
  • attributes，object。<svg> 元素的属性。
  • viewBox，SVGViewBox。以数字数组形式表示的 viewBox。

结果中的属性列表不包含 xmlns，因为它在所有 SVG 中都是相同的。 它始终包含 viewBox，通常包含 width 和 height。

您可以使用 iconToHTML() 将结果转换为字符串。

结果示例 ​

json{
   "attributes": {
       "width": "24",
       "height": "24",
       "viewBox": "0 0 24 24"
   },
   "viewBox": [0, 0, 24, 24],
   "body": "<path d=\"M7 6v12l10-6z\" fill=\"currentColor\"/>"
}

示例 ​

example.ts
tsimport { icons } from '@iconify-json/codicon';
import { getIconData, iconToSVG, iconToHTML, replaceIDs } from '@iconify/utils';

const iconName = 'debug-console';

// Get content for icon
const iconData = getIconData(icons, iconName);
if (!iconData) {
   throw new Error(`Icon "${iconName}" is missing`);
}

// Use it to render icon
const renderData = iconToSVG(iconData, {
   height: 'auto',
});

// Generate SVG string
const svg = iconToHTML(replaceIDs(renderData.body), renderData.attributes);

// Log SVG
console.log(svg);

图标尺寸 ​

默认情况下，返回的属性包含 width 和 height，其中 height 被设置为 "1em"。

如果您想移除尺寸，请在 customisations 参数中将 height 设置为 "unset" 或 "none"：

jsconst result = iconToSVG(data, {
   // 仅设置 height 也会同时移除 width
   height: 'unset',
});