Appearance

Iconify for Ember 函数：addIcon ​

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

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

用法 ​

该函数包含以下参数：

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

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

示例 ​

jsimport { addIcon } from '@iconify/ember/components/iconify-icon';

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 中。

API 提供商 ​

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

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

示例：

jsimport { addIcon } from '@iconify/ember/components/iconify-icon';

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"。

在组件模板中，可以像这样使用该图标：

hbs<IconifyIcon @icon='@custom:md:test' />

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

单个图标 ​

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

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