Appearance

Web 组件函数：addAPIProvider ​

本教程是 Iconify Icon Web 组件教程 的一部分。

函数 addAPIProvider() 用于添加 API 提供商。

请确保在从 API 提供商获取图标之前调用它，否则组件将无法获取图标。如果不确定代码的执行顺序，也可以在单独的脚本中加载组件之前，使用全局变量 IconifyProviders 来设置 API 提供商的配置。有关详细信息，请参阅 API 提供商文档。

API 提供商 ​

API 提供商允许在同一文档中使用来自多个 API 服务器的图标。例如，您可以使用默认的 Iconify 图标，以及来自 IconScout、Icons8 或自定义 API 的自定义图标。

Public API

@my-icons

@icons8

mdi-light:home

@my-icons:line-24:home

@icons8:ios:home

为了支持提供商，图标名称的语法已进行扩展。Iconify 图标组件中的图标名称包含 3 个部分：

@api-provider:icon-prefix:icon-name
provider prefix name
  • provider points to API source. Starts with "@", can be empty (empty value is used for public Iconify API).
  • prefix is name of icon set.
  • name is name of icon.

所有部分均由 ":" 分隔，提供商部分是可选的，如果为空则可以省略。

示例：

  • @my-icons:line-24:home：图标从提供商 "my-icons" 获取。该提供商对应的图标名称为 line-24:home。
  • mdi-light:home：图标未指定提供商，因此提供商部分为空。空值将用于公共 Iconify API。

用法 ​

该函数包含以下参数：

  • provider，string。提供商 ID。
  • config，APIConfig。API 配置对象。

示例 ​

tsimport { addAPIProvider } from 'iconify-icon';

addAPIProvider('local', {
   // Array of host names
   resources: ['http://localhost:3000'],
});

// Demo using provider in icon name
export function renderHomeIcon() {
   // HTML: <iconify-icon icon="@local:material-icons:home"></iconify-icon>

   const node = document.createElement('iconify-icon');
   node.setAttribute('icon', '@local:material-icons:home');
   return node;
}

有关详细信息，请参阅 API 提供商文档。