Appearance

SVG 框架函数：renderIcon ​

本教程属于 Iconify SVG 框架函数教程 的一部分。

函数 renderIcon() 生成 renderSVG() 和 renderHTML() 函数所使用的数据。

当您自行生成 <svg> 元素时，应使用此函数。例如，当它由某个组件生成时。

用法 ​

函数包含以下参数：

  • name，string 类型。图标名称。
  • customisations。可选的自定义配置对象。

函数返回包含图标数据的 object 对象，如果图标不可用则返回 null。

结果 ​

Result 对象具有以下属性：

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

该属性列表不包含标准属性：xmlns、xmlns:link。它也不包含由图标组件添加的属性：aria-hidden、focusable、role、class、style。您可以自行决定要添加哪些属性。

更改 ID！ ​

使用此函数提供的数据生成图标时，请使用 replaceIDs() 函数。

它将确保每个图标内部的元素具有唯一的 ID。

示例 ​

jsIconify.renderIcon('bi:stopwatch', {
   hFlip: true,
   height: '24',
});
结果：
json{
   "attributes": {
       "width": "24",
       "height": "24",
       "preserveAspectRatio": "xMidYMid meet",
       "viewBox": "0 0 16 16"
   },
   "body": "<g transform=\"translate(16 0) scale(-1 1)\"><g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M8 15A6 6 0 1 0 8 3a6 6 0 0 0 0 12zm0 1A7 7 0 1 0 8 2a7 7 0 0 0 0 14z\"/><path fill-rule=\"evenodd\" d=\"M8 4.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4.5a.5.5 0 0 1 0-1h3V5a.5.5 0 0 1 .5-.5zM5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z\"/><path d=\"M7 1h2v2H7V1z\"/></g></g>"
}

另一个示例：

js// 获取图标数据
const icon = Iconify.renderIcon("carbon:deploy");

// 创建元素
const svg = document.createElement("svg");
const svgDefaults: IconifySVGProps = {
 xmlns: "http://www.w3.org/2000/svg",
 "xmlns:xlink": "http://www.w3.org/1999/xlink",
 "aria-hidden": true,
 focusable: false,
 role: "img",
};
Object.keys(svgDefaults).forEach((attr) => {
 svg.setAttribute(attr, svgDefaults[attr]);
});
Object.keys(icon.attributes).forEach((attr) => {
 svg.setAttribute(attr, icon.attributes[attr]);
});

// 设置内容
svg.innerHTML = Iconify.replaceIDs(icon.body);

自定义配置 ​

第二个参数是可选的图标自定义配置。请勿将其与占位符 data- 属性混淆。

可用的自定义配置：

IconifyIconCustomisations 类型是一个对象，包含以下可选属性，分为几个类别。

垂直对齐：

  • inline，boolean。若启用，会在样式中添加 vertical-align: -0.125em，使图标渲染于基线下方。默认值为 false。

图标尺寸：

  • width，string|number|null。图标宽度。默认值为 null。
  • height，string|number|null。图标高度。默认值为 null。

有几个关键字可用于 width 和 height：

  • "auto" 将尺寸设置为 viewBox 中找到的原始图标尺寸。
  • "unset" 和 "none" 会从 SVG 中移除尺寸。

如果两个尺寸均未设置，height 将默认为 "1em"。

只需设置一个尺寸（例如 height）即可。另一个尺寸将根据图标的宽高比自动计算。若使用关键字，另一个尺寸也将设置为相同的关键字。

变换：

  • hFlip，boolean。水平翻转图标。默认值为 false。
  • vFlip，boolean。垂直翻转图标。默认值为 false。
  • rotate，number。以 90 度为增量进行旋转。默认值为 0。

有关尺寸和对齐的更多详细信息，请参阅 图标尺寸文档。

有关变换的更多详细信息，请参阅 图标变换文档。

渲染 SVG 或 HTML ​

此函数创建 object 对象。如果您想创建 <svg> 元素，请改用 renderSVG()。如果您想获取 HTML string 字符串，请改用 renderHTML()。