Appearance

Iconify for Vue 2 函数：addCollection ​

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

函数 addCollection() 将图标集添加到组件的图标存储中。

用法 ​

该函数包含以下参数：

  • data，IconifyJSON。图标集数据。
  • provider，string。可选的 API 提供商 ID。

该函数返回 boolean 值：成功时返回 true，如果数据有问题则返回 false。

如果图标集包含 provider 属性，且向 addCollection() 传递了第二个参数，则第二个参数中的 provider 将覆盖图标集中的 provider。

示例 ​

jsimport { addCollection } from '@iconify/vue2';

addCollection({
   prefix: 'custom',
   icons: {
       icon1: {
           body: '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
       },
   },
   width: 24,
   height: 24,
});
jsimport { addCollection } from '@iconify/vue2';

addCollection({
   prefix: 'mdi',
   icons: {
       '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"/>',
       },
       'account-cash': {
           body: '<path d="M11 8c0 2.21-1.79 4-4 4s-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4m0 6.72V20H0v-2c0-2.21 3.13-4 7-4c1.5 0 2.87.27 4 .72M24 20H13V3h11v17m-8-8.5a2.5 2.5 0 0 1 5 0a2.5 2.5 0 0 1-5 0M22 7a2 2 0 0 1-2-2h-3c0 1.11-.89 2-2 2v9a2 2 0 0 1 2 2h3c0-1.1.9-2 2-2V7z" fill="currentColor"/>',
       },
       'account': {
           body: '<path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z" fill="currentColor"/>',
       },
       'home': {
           body: '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
       },
   },
   width: 24,
   height: 24,
});

注意：通过此函数添加的图标不会被缓存在 localStorage 和 sessionStorage 中。

API 提供者 ​

API 提供商参数可用于指定图标集属于特定的 API 提供商。

它还可用于异步加载自定义图标，而不会触发 API 查询。每个 API 提供商都有其自己的 API 端点，因此，如果您使用的是组件未配置的自定义 API 提供商（目前默认情况下组件未配置任何 API 提供商），组件将不会尝试从未知的 API 提供商加载缺失的图标。

示例：

jsimport { addCollection } from '@iconify/vue2';

addCollection(
   // Icon set: prefix and icons
   {
       prefix: 'md',
       icons: {
           test: {
               body: '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
           },
       },
       width: 24,
       height: 24,
   },
   // API provider
   'custom'
);

上述代码仅添加了一个图标：

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

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

jsx<Icon icon="@custom:md:test" />

语法与默认图标语法类似，但图标名称中需包含 API 提供商 "@custom"。详情请参阅 API 提供商文档。

单个图标 ​

此函数以 IconifyJSON 格式添加整个图标集。

如果您只想添加一个图标，并且拥有 IconifyIcon 数据，请改用 addIcon() 函数。