关于 icon-design
帮助设计师和开发者将概念对应到图标，并保持样式一致的图标设计技能，提供图标库对比、选择指引和实现模板。
主要功能
- 01概念与图标对照表
- 02Lucide、Heroicons 和 Phosphor 指南
- 03尺寸与一致性规则
- 04Tree-shaking 建议
- 05React 和 HTML 模板
适用场景
- 01为界面概念选择图标
- 02保持区域内图标风格一致
- 03避免图标包体积过大
- 04从 FA 或 Material 图标迁移
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/icon-design确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
README.md.claude-plugin/plugin.jsonagents/icon-selector.mdreferences/icon-templates.mdlibrary-comparison.mdmigration-guide.mdsemantic-mapping.mdrules/icon-design.md详细介绍
图标设计
为任务选择合适的图标。将概念映射到图标，提供模板，避免常见错误。
快速参考（20 个常用概念）
| 概念 | 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,400 多个图标，React 集成出色）
详细对比请参阅 references/library-comparison.md。
图标样式规则
尺寸
| 场景 | Tailwind 类 | 像素 |
|---|---|---|
| 与文本同行 | w-4 h-4 或 w-5 h-5 | 16-20px |
| 功能卡片 | w-8 h-8 | 32px |
| Hero 区块 | w-10 h-10 或 w-12 h-12 | 40-48px |
| 大型装饰图标 | w-16 h-16 | 64px |
一致性规则
- 切勿混用样式——在同一区块中统一使用描边或实心样式
- 切勿使用表情符号——使用合适的图标组件（支持 Tree-shaking）
- 使用 currentColor——图标通过
stroke="currentColor"继承文本颜色 - 使用语义颜色——使用
text-primary，而不是text-blue-500
Tree-shaking（关键）
动态选择图标会破坏 Tree-shaking。请使用显式映射：
// BAD - all icons bundled
import * as Icons from 'lucide-react'
const Icon = Icons[iconName] // Tree-shaken away!
// GOOD - explicit map
import { Home, Users, Settings, type LucideIcon } from 'lucide-react'
const ICON_MAP: Record<string, LucideIcon> = { Home, Users, Settings }
const Icon = ICON_MAP[iconName]
选择流程
- 确定概念——标签／标题传达的是什么？
- 检查语义映射——请参阅
references/semantic-mapping.md - 选择库——Lucide（默认）、Heroicons（Tailwind）、Phosphor（不同粗细）
- 应用模板——请参阅
references/icon-templates.md - 检查一致性——同一区块使用相同的样式和尺寸
决策树
不确定该选哪个图标时：
Is it about recognition/awards? → Trophy, Star, Award
Is it about money/price? → Tag, DollarSign, CreditCard
Is it about location? → MapPin, Globe, Map
Is it about people/team? → Users, UserGroup, User
Is it about communication? → MessageCircle, Phone, Mail
Is it about safety/trust? → Shield, Lock, ShieldCheck
Is it about speed/time? → Zap, Clock, Timer
Is it trade-specific? → Check semantic-mapping.md
Still unsure? → CheckCircle (generic positive) or Sparkles (generic feature)
资源
references/semantic-mapping.md- 按类别整理的完整概念→图标映射表references/icon-templates.md- 使用 Tailwind 的 React／HTML 模式references/library-comparison.md- Lucide、Heroicons 与 Phosphor 的对比references/migration-guide.md- 将 FA／Material 替换为现代替代方案rules/icon-design.md- 项目的修正规则
评论
支持 Markdown