SuperAPI AI 工具集

icons

前端与建站

查看项目

更新于 10-16 03:36

技能介绍

用途:为应用挑选与现有视觉语言一致的图标、国旗、文件类型标记和品牌标志。普通 UI 图标优先复用项目现有图标库;品牌、国家或文件类型标记则改用专门来源,并在实际上下文中核对效果。

主要来源:UI 图标用项目现有库;国旗用 Iconify 的 circle-flags、flag、flagpack;彩色文件类型标记用 vscode-icons、catppuccin、material-icon-theme;彩色品牌标志或文字标志用 svgl(含明暗变体);单色品牌标志用 simple-icons;技术或基础设施标志用 logos、devicon、skill-icons;目录中没有的标记则用组织官方品牌资源。这些只是检索起点,不保证覆盖范围或授权,需核对所选集合的许可证与品牌使用要求。官方资源缺失时不要自行虚构标志。

Iconify 用法:在目录或搜索 API 中检索,结果为 prefix:name 标识;可用 prefixes 限定集合。API 无需密钥,SVG 地址为 https://api.iconify.design/{prefix}/{name}.svg,集合元数据地址为 https://api.iconify.design/collections?prefixes=<sets>。国旗集用 ISO 3166-1 alpha-2 小写代码;flag 集需比例后缀,如 flag:fi-4x3、flag:fi-1x1,裸 flag:fi 会 404。优先使用 SVG 国旗而非 emoji,因 Windows 表情字体无国旗字形。默认使用本地 SVG 或构建期图标数据;@iconify/react 传入字符串标识可能在运行时从公共 API 拉取缺失数据,安装图标数据包并不等于离线渲染。

svgl 用法:用其 API 文档查标题、分类与资源路径,主要收录软件与品牌标志,部分文件标记如 PDF。?search= 匹配标题,标题不存在返回“SVG not found”;分类名区分大小写。注册表名目前为标题 slug 化,添加前用 https://svgl.app/r/<name>.json 确认。条目可能含明暗路径与独立文字标志。shadcn 项目可定义 @svgl 命名空间,若未使用 shadcn 则直接用原始资源,不要仅为加标志而初始化组件系统。

离线情况:Iconify 与 svgl 均为在线服务。离线时可搜索已安装的图标库(如 node_modules/lucide-react/dist/esm/icons/)或已安装的 @iconify-json/<prefix>/icons.json,并复用仓库内已有资源。缺失品牌标志时,向对方索取官方文件或使用中性占位,不要自行绘制。

集成注意:匹配描边/填充、视觉尺寸与对齐。Lucide 为 24px 网格、2px 描边;Tabler、Hugeicons 接近,Material、Carbon 更细。彩色文件类型标记自带内边距,常需调大一档。可按角色混用:控件一组、国旗一组、文件类型一组。保留品牌色。按实际背景选择明暗变体。内联 SVG 的 mask、渐变、clipPath 需各渲染实例唯一 ID 并同步更新引用。纯图标控件需可访问名称,装饰性 SVG 需隐藏。最后核对渲染控件与下载资源。