Appearance

SVG 框架函数：renderSVG ​

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

函数 renderSVG() 用于创建 <svg> 元素。

用法 ​

该函数包含以下参数：

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

函数返回 <svg> 元素，如果图标不可用则返回 null。

示例 ​

jsif (Iconify.iconLoaded('mdi:home')) {
   node.appendChild(Iconify.renderSVG('mdi:home'));
}
html<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   aria-hidden="true"
   focusable="false"
   role="img"
   class="iconify iconify--mdi"
   width="1em"
   height="1em"
   preserveAspectRatio="xMidYMid meet"
   viewBox="0 0 24 24"
>
   <path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"></path>
</svg>
Generated HTML

另一个示例：

jsconst node = document.createElement('div');
const icon = Iconify.renderSVG('bi:stopwatch', { rotate: 1, height: 'auto' });
node.appendChild(icon);

自定义配置 ​

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

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

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

渲染 HTML ​

此函数创建 <svg> 元素。如果您想获取 string 类型的字符串，请改用 renderHTML()。