Skip to content

图标列表

您可以使用 /collection API 查询获取图标集中的图标列表。

查询

API 查询为 /collection

必需参数:

  • prefixstring。图标集前缀。

可选参数:

  • infoboolean。如果启用,响应将包含图标集信息。
  • charsboolean。如果启用,响应将包含字符映射表。字符映射表仅存在于从图标字体导入的图标集中。

响应

响应是一个复杂对象,包含以下必需属性:

  • prefixstring - 图标集前缀。
  • totalnumber - 可见图标的总数。

此外还有许多可选属性。

图标

与图标列表相关的属性:

  • uncategorizedstring[] - 不属于任何类别的图标名称列表。
  • categoriesRecord<string,string[]> - 按类别排序的图标列表。键为类别标题,值为属于该类别的图标名称列表。
  • hiddenstring[] - 隐藏图标的列表。通常,如果图标在某个时间点从图标集中被移除,则会被标记为隐藏。为了防止用户应用崩溃,图标永远不会被删除,而是被标记为隐藏,但仍可在应用中使用。
  • aliasesRecord<string,string> - 别名列表。键为别名,值为父图标名称。

要获取所有应显示的图标名称列表,请使用以下逻辑:

  • 如果存在,获取 uncategorized 属性的值。
  • 如果存在,遍历 categories 属性中的所有类别。一个图标可能存在于多个类别中,因此需要检查重复项,最简单的方法是在 JavaScript 中使用 Set 类而不是 Array

要获取所有图标名称,请在上述结果中添加:

  • 如果存在,aliases 对象的键。它们不应显示在图标列表中,因为它们是其他图标的重复名称。
  • 如果存在,hidden 属性的值。它们不应显示在图标列表中,因为这些是隐藏图标。为了防止用户应用崩溃,图标永远不会被删除,而是被标记为隐藏,但仍可在应用中使用。

其他属性

其他可选属性:

  • infoIconifyInfo - 图标集信息,在启用 info 参数时设置。
  • titlestring - 图标集名称,通常是 info.name 的副本。
  • charsRecord<string,string> - 字符映射表,其中键为十六进制字符串形式的字符,值为图标名称。它仅存在于从图标字体导入的图标集中。可用于允许用户通过字符代码搜索图标名称。
  • themesprefixessuffixes - 图标集主题。属性 themes 已弃用,因此可以忽略。

请参阅 IconifyJSON 类型和元数据文档

只有包含 info 的图标集才能被浏览。如果您想隐藏某个图标集,请在导入时不要设置 info 对象。

简单示例

这是一个基础图标集,不包含类别或任何额外元数据:

json{
   "prefix": "mdi-light",
   "total": 267,
   "title": "Material Design Light",
   "uncategorized": [
       "account",
       "account-alert",
       "alarm",
       "alarm-plus",
       "alert",
       "alert-circle",
       "alert-octagon",
       "arrange-bring-forward",
       "arrange-bring-to-front",
       "arrange-send-backward",
       "arrange-send-to-back",
       "arrow-down",
       "arrow-down-circle",
       "arrow-left",
       "arrow-left-circle",
       "arrow-right",
       "arrow-right-circle",
       "arrow-up",
       "arrow-up-circle",

       "view-dashboard",
       "view-module",
       "volume",
       "volume-minus",
       "volume-mute",
       "volume-off",
       "volume-plus",
       "wallet",
       "wifi",
       "xml"
   ]
}
/collection?prefix=mdi-light&pretty=1

实际的 API 响应要大得多。此处示例已进行精简。

类别示例

以下示例中的图标集:

  • 使用类别对图标进行排序(categories 可与上述示例中的 uncategorized 结合使用,因此请检查这两个属性以获取所有图标)。
  • 包含隐藏图标。
  • 包含别名。
  • 包含主题后缀
json{
   "prefix": "line-md",
   "total": 395,
   "title": "Material Line Icons",
   "categories": {
       "Account": [
           "account",
           "account-add",
           "account-alert",
           "account-delete",
           "account-remove",
           "account-small"
       ],
       "Alerts": [
           "alert",
           "alert-circle",
           "alert-circle-twotone",
           "alert-twotone",
           "bell",
           "bell-twotone",
           "question",
           "question-circle",
           "question-circle-twotone"
       ],
       "Food and Drink": [
           "beer",
           "beer-alt-filled",
           "beer-alt-filled-loop",
           "beer-alt-twotone",
           "beer-alt-twotone-loop",
           "beer-filled",
           "beer-loop",
           "beer-twotone",
           "beer-twotone-loop",
           "coffee",
           "coffee-arrow",
           "coffee-arrow-filled",
           "coffee-arrow-twotone",
           "coffee-filled",
           "coffee-half-empty-twotone-loop",
           "coffee-loop",
           "coffee-twotone",
           "coffee-twotone-loop"
       ]
   },
   "hidden": ["iconify2"],
   "aliases": {
       "beer-alt-solid": "beer-alt-filled",
       "beer-alt-solid-loop": "beer-alt-filled-loop",
       "beer-solid": "beer-filled",
       "check-list-3-solid": "check-list-3-filled",
       "grid-3-solid": "grid-3-filled",
       "list-3-solid": "list-3-filled"
   },
   "suffixes": {
       "": "Outline Animation",
       "out": "Erase Animation",
       "loop": "Looping Animation",
       "transition": "Transition Between Icons"
   }
}
/collection?prefix=line-md&pretty=1

实际的 API 响应要大得多。此处示例已进行精简。

错误响应

如果未找到图标集或无法浏览,服务器将返回 404 HTTP 错误。

如果禁用了图标浏览功能,路由将不被处理,服务器将返回 404 HTTP 错误。

类型

API 响应的类型:

tsimport type { IconifyInfo, IconifyJSON } from '@iconify/types';

export interface APIv2CollectionResponse {
   // 图标集前缀
   prefix: string;

   // 图标数量(与 info?.total 重复)
   total: number;

   // 图标集标题(如果可用,与 info?.name 重复)
   title?: string;

   // 图标集信息
   info?: IconifyInfo;

   // 未分类的图标列表
   uncategorized?: string[];

   // 按类别排序的图标列表
   categories?: Record<string, string[]>;

   // 隐藏图标列表
   hidden?: string[];

   // 别名列表,键 = 别名,值 = 父图标
   aliases?: Record<string, string>;

   // 字符映射,键 = 字符,值 = 图标名称
   chars?: Record<string, string>;

   // 主题
   themes?: IconifyJSON['themes'];
   prefixes?: IconifyJSON['prefixes'];
   suffixes?: IconifyJSON['suffixes'];
}