Appearance

SVG 框架函数：renderHTML ​

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

函数 renderHTML() 用于生成图标的 HTML 代码。

用法 ​

该函数包含以下参数：

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

函数返回 string 类型，如果图标不可用则返回 null。

示例 ​

jsif (Iconify.iconExists('mdi:home')) {
   node.innerHTML = Iconify.renderHTML('mdi:home');
}

另一个示例：

jsconst node = document.createElement('div');
node.innerHTML = Iconify.renderHTML('bi:stopwatch', {
   rotate: 1,
   height: 'auto',
});

自定义配置 ​

第二个参数是可选的图标自定义配置。请勿将其与占位符 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 ​

此函数创建 <string>。如果您想创建 <svg> 元素，请改用 renderSVG()。