SuperAPI AI 工具集

icon-design

设计与创作

查看项目

更新于 10-16 02:35

技能介绍

用途:为网站或设计系统选择语义合适的图标,把界面文案/概念映射到 Lucide、Heroicons、Phosphor 三个现代图标库中的对应图标,并提供可直接套用的 React/HTML 模板,避免破坏 tree-shaking、风格不一致等常见错误。

主要能力:提供概念到图标的快速对照(如奖项 Trophy、价格 Tag、位置 MapPin、安全 Shield、设置 Settings、搜索 Search 等);给出库选型建议(Lucide 适合通用与 React 项目,Heroicons 适合 Tailwind 与极简风格,Phosphor 适合需要字重变化);包含语义映射、图标模板、库对比、迁移指南、无障碍等参考文档;并说明如何用 Explore、Task、Plan 等代理审计现有图标用法、迁移旧库或规划图标系统架构。

使用方式:先识别标签或标题传达的概念,再查语义映射选择图标,然后按默认建议选库(Lucide,1600+ 图标,lucide-react/dynamic 支持动态加载),套用模板,最后校验同一区块内风格与尺寸一致。安装包为 lucide-react、@heroicons/react、@phosphor-icons/react。样式规则要求同区块只用一种风格(全描边或全实心)、不用 emoji、使用 currentColor 与语义色(如 text-primary)、尺寸统一(行内 w-4 h-4、卡片 w-8 h-8、hero w-10 h-10)、显式具名导入保证 tree-shaking,装饰性图标加 aria-hidden="true",纯图标按钮加 aria-label。Heroicons 需用带尺寸前缀的路径如 @heroicons/react/24/outline。

适用场景:网页图标选择与统一、React/Tailwind 项目图标接入、从 Font Awesome/Material/Feather/emoji 迁移、设计系统图标规范制定、现有图标一致性审计。

限制:资料未提供收费、价格、代码示例全文及其他未明确说明的内容。