Appearance

SVG 框架函数：addIcon ​

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

函数 addIcon() 向组件的图标数据存储中添加一个图标。

用法 ​

该函数包含以下参数：

  • name，string。图标名称。
  • data，IconifyIcon。图标数据。

该函数返回 boolean 值：成功时返回 true，数据有误时返回 false。

示例 ​

jsIconify.addIcon('mdi:account-box', {
   body: '<path d="M6 17c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6m9-9a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3M3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z" fill="currentColor"/>',
   width: 24,
   height: 24,
});

注意事项 ​

  • 通过此函数添加的图标不会缓存在 localStorage 和 sessionStorage 中。
  • 调用此函数将在下一个 tick 触发 DOM 重新扫描。

API 提供者 ​

API provider 参数可用于异步加载自定义图标，且不会触发 API 查询。

每个 API provider 都有其专属的 API 端点，因此如果您使用的自定义 API provider 未在组件中进行配置（目前默认情况下组件未配置任何 API provider），组件将不会尝试从未知的 API provider 加载缺失的图标。

示例：

jsIconify.addIcon('@custom:md:test', {
   body: '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
   width: 24,
   height: 24,
});

上述代码添加了以下图标：

  • provider 为 "custom"。
  • prefix 为 "md"。
  • name 为 "test"。

在 HTML 代码中，可以按如下方式使用此图标：

html<span class="iconify" data-icon="@custom:md:test"></span>

语法与默认图标语法类似，但在图标名称中使用了 API 提供商 "@custom"。请参阅 API 提供商文档 以了解详细信息。

单个图标 ​

此函数用于添加一个 IconifyIcon 格式的图标。

如果您需要添加多个图标，或已有 IconifyJSON 数据，请改用 addCollection() 函数。