Appearance

图标数据 ​

目前有超过 275,000 个开源图标可供使用，您可以将它们用于您的项目中。

所有这些图标都具备以下特点：

  • 开源。
  • 经过验证和清理。
  • 自动保持更新。

从哪里获取？ ​

为了方便开发者使用图标，有多种获取图标数据的方式。

图标集的主要来源是 GitHub 上的 iconify/icon-sets 仓库。图标集以 IconifyJSON 格式存储。

除了 Git 仓库外，图标集还提供以下形式：

  • 大型 NPM 包 @iconify/json，内容与 Git 仓库完全一致。
  • 面向 PHP 开发者的 Packagist 包 iconify/json。
  • NPM 包 @iconify/collections，仅包含可用图标集的列表（即大型包中的 collections.json 文件）。
  • 较小的 NPM 包 @iconify-json/*，每个包仅包含一个 IconifyJSON 格式的图标集。
  • Iconify API，可用于按需获取图标数据。

以下是对每种来源的详细说明。

所有图标 ​

您可以从以下来源获取该软件包的最新版本：

该软件包体积较大，下载可能需要一些时间。

有关文件列表、函数和使用示例，请参阅大型图标包文档。

图标集列表 ​

如果您想获取所有可用图标集的列表，可以通过以下方式：

  • 包含在上述大型包中，文件名为 collections.json。
  • 作为 NPM 包 @iconify/collections 提供。

更多详情请参阅图标集列表。

独立图标集 ​

每个图标集也会作为独立的 NPM 包 @iconify-json/{prefix} 发布（其中 "{prefix}" 为图标集前缀）。

更多详情请参阅拆分图标集包。

API ​

Iconify API 与所有其他来源有很大不同。

其他来源是各种可在构建时使用的软件包。使用它们需要预先知道您使用了哪些图标，因此构建工具只会提取您所需图标的数据。由于它们体积过大，无法在运行时使用。

API 适用于您不确定需要哪些图标的场景。多个图标组件 会按需从 API 获取图标数据，然后进行渲染。

<Icon icon="mdi:home" />
<iconify-icon icon="mdi:alert" />
Developer passes icon name as attribute for icon component.

API

Icon Names

Browser

Component requests data for icons from Iconify API.

API

Icon Data

Browser

API sends data for requested icons.

API hosts thousands of icons, but sends only data for icons that were requested.
<svg width="1em" height="1em" viewBox="0 0 24 24" ...>...</svg>
<iconify-icon icon="mdi:alert">#shadow-root<svg width="1em" height="1em" viewBox="0 0 24 24" ...>...</svg></iconify-icon>
Component renders SVG using data retrieved from Iconify API.

使用 API 获取图标数据存在一些缺点：

  • 需要用户保持在线。无法用于离线应用。
  • 依赖第三方服务，不过您可以自行托管 Iconify API 实例。
  • 图标组件包含额外开销：用于按需下载图标数据的代码。

API 还提供可用图标集和图标的列表，可用于构建浏览和搜索图标的应用程序，例如各类插件和图标选择器。

SVG ​

没有专门针对 SVG 文件的软件包，但您可以使用 Iconify Tools 自行生成。

在 Iconify Tools 示例中，您可以找到一个将所有图标导出为 SVG 的简单脚本。