图标列表
您可以使用 /collection API 查询获取图标集中的图标列表。
查询
API 查询为 /collection。
必需参数:
- prefix,string。图标集前缀。
可选参数:
- info,boolean。如果启用,响应将包含图标集信息。
- chars,boolean。如果启用,响应将包含字符映射表。字符映射表仅存在于从图标字体导入的图标集中。
响应
响应是一个复杂对象,包含以下必需属性:
- prefix,string - 图标集前缀。
- total,number - 可见图标的总数。
此外还有许多可选属性。
图标
与图标列表相关的属性:
- uncategorized,string[] - 不属于任何类别的图标名称列表。
- categories,Record<string,string[]> - 按类别排序的图标列表。键为类别标题,值为属于该类别的图标名称列表。
- hidden,string[] - 隐藏图标的列表。通常,如果图标在某个时间点从图标集中被移除,则会被标记为隐藏。为了防止用户应用崩溃,图标永远不会被删除,而是被标记为隐藏,但仍可在应用中使用。
- aliases,Record<string,string> - 别名列表。键为别名,值为父图标名称。
要获取所有应显示的图标名称列表,请使用以下逻辑:
- 如果存在,获取 uncategorized 属性的值。
- 如果存在,遍历 categories 属性中的所有类别。一个图标可能存在于多个类别中,因此需要检查重复项,最简单的方法是在 JavaScript 中使用 Set 类而不是 Array。
要获取所有图标名称,请在上述结果中添加:
- 如果存在,aliases 对象的键。它们不应显示在图标列表中,因为它们是其他图标的重复名称。
- 如果存在,hidden 属性的值。它们不应显示在图标列表中,因为这些是隐藏图标。为了防止用户应用崩溃,图标永远不会被删除,而是被标记为隐藏,但仍可在应用中使用。
其他属性
其他可选属性:
- info,IconifyInfo - 图标集信息,在启用 info 参数时设置。
- title,string - 图标集名称,通常是 info.name 的副本。
- chars,Record<string,string> - 字符映射表,其中键为十六进制字符串形式的字符,值为图标名称。它仅存在于从图标字体导入的图标集中。可用于允许用户通过字符代码搜索图标名称。
- themes、prefixes 和 suffixes - 图标集主题。属性 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 响应的类型:
ts
import 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'];
}