Appearance

Iconify for Vue 函数：buildIcon ​

本教程属于 Iconify for Vue 函数教程 的一部分。

函数 buildIcon() 生成图标组件用于渲染图标的数据。

您可以使用此函数生成 <svg> 代码。

用法 ​

该函数包含以下参数：

  • icon，IconifyIcon。图标数据。
  • customisations。可选的自定义配置对象。

该函数返回包含图标数据的 object，若图标不可用则返回 null。

在使用此函数之前，你需要先获取图标数据。请参阅 getIcon()、iconLoaded() 和 loadIcon() 函数。

结果 ​

Result 对象具有以下属性：

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

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

自定义 ​

第二个参数是可选的图标自定义选项。可用的自定义选项包括：

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。

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

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

示例 ​

jsimport { buildIcon } from '@iconify/vue';
import biStopwatch from '@iconify-icons/bi/stopwatch';

buildIcon(biStopwatch, {
   hFlip: true,
   height: '24',
});
Result:
json{
   "attributes": {
       "width": "24",
       "height": "24",
       "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>"
}