# 图标使用指引

> 所有设计稿默认用 **Lucide** 图标，特殊风格场景可用 Heroicons / Phosphor。

## 推荐顺序

| 优先级 | 图标库 | 数量 | 风格 | 何时用 |
|---|---|---|---|---|
| 1 | **Lucide** | 1600+ | 线性 24x24、1.5-2px 描边 | **默认选择**，覆盖 90% 场景 |
| 2 | Heroicons | 300+ | Outline / Solid 24x24 | 需要 Solid 变体，或已用 Tailwind |
| 3 | Phosphor | 9000+ (6 weight) | 多字重 | 需要字重变化或 Duotone 效果 |
| 4 | Tabler | 6100+ | 线性 24x24 2px 描边 | Lucide 找不到时 |

## 尺寸规范

| 场景 | 尺寸 | 描边 |
|---|---|---|
| 按钮内图标 | 16x16 或 20x20 | 1.5-2px |
| 导航栏图标 | 20x20 或 24x24 | 1.5-2px |
| Tab Bar 图标 | 24x24 | 1.5-2px |
| 卡片内装饰图标 | 24x24 或 32x32 | 2px |
| 空状态大图标 | 48x48 或 64x64 | 2-3px |
| 列表项前缀 | 16x16 或 20x20 | 1.5px |

## 颜色

- 默认跟随文字颜色：`currentColor`
- 强调色图标用主色（`primary-600`）
- 语义色用对应语义色（成功绿、警告黄、错误红）
- **不要**给图标加多种颜色（除非用 Phosphor Duotone）

## 在 HTML 设计稿中如何引用

**方法 1：直接内联 SVG（推荐）**
```html
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
     viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/><path d="M12 5v14"/>
</svg>
```
- 在 https://lucide.dev/icons/ 搜索图标，点 "SVG" 复制代码

**方法 2：CDN（更快，但依赖网络）**
```html
<!-- 在 head 中 -->
<script src="https://unpkg.com/lucide@latest"></script>
<!-- 在 body 中 -->
<i data-lucide="home"></i>
<script>lucide.createIcons();</script>
```

**方法 3：Tailwind + 图标字体（不推荐）**
- 图标字体在 Retina 屏会糊，优先用 SVG

## 常见图标映射

| 概念 | Lucide 图标名 |
|---|---|
| 首页 | `home` |
| 搜索 | `search` |
| 用户 | `user` / `user-circle` |
| 设置 | `settings` / `cog` |
| 消息 | `message-circle` / `mail` |
| 购物车 | `shopping-cart` / `shopping-bag` |
| 收藏 | `heart` / `bookmark` |
| 分享 | `share-2` |
| 删除 | `trash-2` |
| 编辑 | `pencil` / `edit-3` |
| 加 | `plus` |
| 关闭 | `x` |
| 返回 | `arrow-left` / `chevron-left` |
| 更多 | `more-horizontal` / `more-vertical` |
| 通知 | `bell` |

## 反例（别这么用）

- ❌ 一个页面用多个图标库，风格不统一
- ❌ 图标描边粗细不一（同页面必须统一 1.5px 或 2px）
- ❌ 彩色图标堆一堆 —— 保持单色
- ❌ 把图标拉得变形 —— 必须保持正方形比例
- ❌ 用 emoji 当图标（渲染不一致）