关于 icon-design
用于从 Lucide、Heroicons 和 Phosphor 中选择图标的设计技能，提供语义映射和使用建议，帮助保持实现一致并兼顾无障碍性。
主要功能
- 01按概念匹配合适图标
- 02对比三个图标库
- 03使用现成界面模板
- 04避免影响 tree-shaking 的写法
- 05遵循无障碍和样式规范
适用场景
- 01为界面标签选择图标
- 02统一某个区域的图标约定
- 03检查导入方式是否影响 tree-shaking
- 04替换表情符号或旧图标库
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/icon-design确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/accessibility.mdicon-templates.mdlibrary-comparison.mdmigration-guide.mdsemantic-mapping.md详细介绍
图标设计
为任务选择合适的图标。在三个现代图标库中映射概念与图标，提供可直接使用的模板，并避免树摇失效、样式不一致等常见问题。
快速参考
| 概念 | Lucide | Heroicons | Phosphor |
|---|---|---|---|
| 奖项/质量 | Trophy | trophy | Trophy |
| 价格/价值 | Tag | tag | Tag |
| 位置 | MapPin | map-pin | MapPin |
| 专业知识 | GraduationCap | academic-cap | GraduationCap |
| 支持 | MessageCircle | chat-bubble-left-right | ChatCircle |
| 安全 | Shield | shield-check | Shield |
| 速度 | Zap | bolt | Lightning |
| 电话 | Phone | phone | Phone |
| 电子邮件 | Mail | envelope | Envelope |
| 用户/个人资料 | User | user | User |
| 团队 | Users | user-group | Users |
| 设置 | Settings | cog-6-tooth | Gear |
| 主页 | Home | home | House |
| 搜索 | Search | magnifying-glass | MagnifyingGlass |
| 勾选/成功 | Check | check | Check |
| 关闭/取消 | X | x-mark | X |
| 菜单 | Menu | bars-3 | List |
| 日历 | Calendar | calendar | Calendar |
| 时钟/时间 | Clock | clock | Clock |
| 爱心/收藏 | Heart | heart | Heart |
库的选择
| 库 | 最适合 | 包 |
|---|---|---|
| Lucide | 通用场景、React 项目 | lucide-react |
| Heroicons | Tailwind 项目、极简风格 | @heroicons/react |
| Phosphor | 需要不同粗细的场景 | @phosphor-icons/react |
默认推荐：Lucide（1,600+ 个图标，与 React 集成出色，可通过 lucide-react/dynamic 动态加载）。
选择流程
- 确定概念——标签/标题表达了什么？
- 检查语义映射——参见
references/semantic-mapping.md - 选择图标库——Lucide（默认）、Heroicons（Tailwind）、Phosphor（不同粗细）
- 应用模板——参见
references/icon-templates.md - 验证一致性——每个区块使用相同的样式和尺寸
图标样式规则
| 规则 | 详情 |
|---|---|
| 不混用样式 | 一个区块内统一使用描边或实心样式 |
| 不用表情符号 | 使用合适的图标组件（支持树摇） |
| 使用 currentColor | 图标通过 stroke="currentColor" 继承文本颜色 |
| 语义化颜色 | 使用 text-primary，而非 text-blue-500 |
| 尺寸一致 | 行内使用 w-4 h-4，卡片使用 w-8 h-8，主视觉使用 w-10 h-10 |
| 确保树摇安全 | 使用明确的命名导入和图标映射，绝不使用 import * |
| 无障碍性 | 为装饰性图标添加 aria-hidden="true"，为按钮添加 aria-label |
常见错误
| 错误 | 正确做法 |
|---|---|
使用 import * as Icons 导入所有图标，破坏摇树优化 | 使用明确的命名导入和静态图标映射 |
| 在同一部分混用线框和实心图标样式 | 每个部分选择一种样式，并保持一致 |
| 使用表情符号代替合适的图标组件 | 始终使用 Lucide、Heroicons 或 Phosphor 中支持摇树优化的图标组件 |
在图标上硬编码 text-blue-500 等颜色值 | 使用 text-primary 等语义化颜色，让图标继承主题变更 |
| 根据视觉效果而非语义选择图标 | 先参考语义映射文档映射概念，再选择图标 |
仅含图标的按钮缺少 aria-label | 为仅包含图标的按钮添加 aria-label="Description" |
| 使用未带尺寸前缀的旧版 Heroicons 导入路径 | 使用带尺寸前缀的 @heroicons/react/24/outline |
委派
- 审查现有图标用法是否一致，以及是否存在摇树优化问题：使用
ExploreAgent 扫描导入，并找出样式混用或通配符导入的情况 - 将图标从 Font Awesome 或 Material 迁移到现代库：使用
TaskAgent，并参考迁移指南 - 为设计系统规划图标体系架构：使用
PlanAgent 选择库、定义尺寸规范并建立语义映射
参考资料
- semantic-mapping.md -- 按类别划分的完整概念到图标映射表（质量、价格、位置、行业专用、导航、状态）
- icon-templates.md -- 使用 Tailwind 的 React/HTML 模式（功能卡片、按钮、输入框、导航、状态徽章）
- library-comparison.md -- Lucide、Heroicons 与 Phosphor 对比（功能、包体积、导入模式）
- migration-guide.md -- 将 Font Awesome、Material Icons、Feather 和表情符号迁移为现代替代方案
- accessibility.md -- 装饰性与有意义的图标、aria 属性、屏幕阅读器模式
评论
支持 Markdown