Appearance

Iconify for Vue 函数：addAPIProvider ​

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

函数 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 配置对象。

示例 ​

vue<template>
   <Icon icon="@local:material-icons:home" />
</template>

<script>
import { addAPIProvider, Icon } from '@iconify/vue';

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

export default {
   components: {
       Icon,
   },
};
</script>

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