Appearance

按需加载图标数据 ​

Iconify 图标组件 的主要功能是能够按需加载图标数据。

开发者无需打包图标，只需将图标名称传递给图标组件，所用图标的数据将从 Iconify API 加载。这种方法具有以下优势：

  • 仅加载页面上显示的图标。
  • 易于使用。无需打包。
  • UI 可配置，例如允许用户通过图标选择器选择图标。

流程 ​

按需加载图标数据是如何工作的？

<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 查询：/{prefix}.json?icons={icons}，其中：

  • "{prefix}" 是图标集前缀。若要请求多个图标集的图标，请为每个图标集发送单独的查询。
  • "{icons}" 是图标名称列表，以逗号分隔。

响应为 IconifyJSON 对象。

json{
   "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
}
/mdi.json?icons=account-box,account-cash,account,home&pretty=1

参数 ​

查询包含一个必需参数：icons，如上所述。

此外还有可选参数：

  • pretty，boolean 类型。格式化响应，使其易于阅读，如上方示例所示。

错误响应 ​

如果图标集不可用，服务器将返回 404 HTTP 错误。

缺失的图标将被添加到响应的 not_found 属性中。

类型 ​

有关响应的完整说明，请参阅 IconifyJSON 类型文档。

您可以从 @iconify/types 包中导入该类型。

限制 ​

您无法在同一查询中请求多个图标集的数据。每个图标集需单独查询。

每次查询的图标数量没有限制，但请注意浏览器对 URL 长度有限制。Iconify 图标组件 将 URL 长度限制为 500 个字符。如果 URL 超过 500 个字符，应将 API 查询拆分为多个查询。

缓存 ​

为了帮助浏览器缓存响应，建议查询使用相同的 URL。为实现这一点，请按字母顺序对图标名称进行排序，因此组件始终请求 ?icons=bar,foo，而不是 ?icons=foo,bar 或 ?icons=bar,foo。

此外，将响应缓存在 localStorage 中。

检查更新 ​

要检查图标自上次以来是否已更新，无需再次检索图标。

使用 /last-modified 查询。它返回图标集的 lastModified 属性，您可以将其与缓存响应中的值进行比较。