# 知习图标系统

## 图标来源

[Tabler Icons](https://tabler.io/icons) — MIT 协议，4800+ 统一风格的 SVG 图标。

- 规格：24×24 viewBox，2px 描边，round linecap/linejoin
- 路径：`https://raw.githubusercontent.com/tabler/tabler-icons/main/icons/outline/{name}.svg`
- 可在线搜索：https://tabler.io/icons

## 目录结构

```
shared-assets/icons/          ← SVG 真理源（跨平台共享）
├── README.md
├── icon-settings.svg         ← tabler/settings
├── icon-search.svg           ← tabler/search
├── icon-plus.svg             ← tabler/plus
├── icon-trash.svg            ← tabler/trash
├── icon-check.svg            ← tabler/check
├── icon-chevron-left.svg     ← tabler/chevron-left
├── icon-chevron-right.svg    ← tabler/chevron-right
├── icon-cloud.svg            ← tabler/cloud
├── icon-bell-on.svg          ← tabler/bell
├── icon-bell-off.svg         ← tabler/bell-off
├── icon-sun.svg              ← tabler/sun
├── icon-moon.svg             ← tabler/moon
├── icon-logout.svg           ← tabler/logout
├── icon-camera.svg           ← tabler/camera
├── icon-play.svg             ← tabler/player-play
├── icon-pause.svg            ← tabler/player-pause
├── icon-download.svg         ← tabler/download
├── icon-upload.svg           ← tabler/upload
├── icon-folder.svg           ← tabler/folder
├── icon-flame.svg            ← tabler/flame
├── icon-calendar.svg         ← tabler/calendar
├── icon-sparkles.svg         ← tabler/sparkles
├── icon-brain.svg            ← tabler/brain
├── icon-books.svg            ← tabler/books
├── icon-xmark.svg            ← tabler/x
├── icon-warning.svg          ← tabler/alert-triangle
├── icon-lightbulb.svg        ← tabler/bulb
├── icon-file.svg             ← tabler/file-text
├── icon-pin.svg              ← tabler/pin
├── icon-mic.svg              ← tabler/microphone
├── icon-question.svg         ← tabler/question-mark
├── icon-storage.svg          ← tabler/database
├── icon-language.svg         ← tabler/language
├── icon-privacy.svg          ← tabler/shield-check
├── icon-agreement.svg        ← tabler/file-check
├── icon-goal.svg             ← tabler/target
├── icon-help.svg             ← tabler/help
├── icon-method.svg           ← tabler/book
├── icon-library.svg          ← tabler/bookmarks
├── icon-list.svg             ← tabler/list
├── icon-clock.svg            ← tabler/clock
├── icon-refresh.svg          ← tabler/refresh
├── icon-pencil.svg           ← tabler/pencil
├── icon-notifications.svg    ← tabler/bell（铃铛副本）
├── tab-learn.svg             ← 自定义（学习 Tab）
├── tab-learn-active.svg      ← 自定义（学习 Tab 激活态）
├── tab-library.svg           ← 自定义（知识库 Tab）
├── tab-library-active.svg    ← 自定义（知识库 Tab 激活态）
├── tab-analysis.svg          ← 自定义（分析 Tab）
├── tab-analysis-active.svg   ← 自定义（分析 Tab 激活态）
├── tab-profile.svg           ← 自定义（我的 Tab）
└── tab-profile-active.svg    ← 自定义（我的 Tab 激活态）

ios-projects/.../Assets.xcassets/Icons/  ← iOS 编译资源
└── 每个 SVG 对应一个 .imageset 文件夹
```

## 新增图标步骤

1. 在 https://tabler.io/icons 搜索图标名
2. 下载 SVG：
   ```bash
   curl -O https://raw.githubusercontent.com/tabler/tabler-icons/main/icons/outline/{name}.svg
   ```
3. 改名放入 `shared-assets/icons/`：
   ```bash
   cp {name}.svg shared-assets/icons/icon-{用途}.svg
   ```
4. 创建 iOS imageset：
   ```bash
   mkdir -p ios-projects/.../Assets.xcassets/Icons/icon-{用途}.imageset
   cp shared-assets/icons/icon-{用途}.svg ios-projects/.../Assets.xcassets/Icons/icon-{用途}.imageset/
   ```
5. Contents.json 模板（每新建一个就复制改文件名）：
   ```json
   {"images":[{"filename":"icon-{用途}.svg","idiom":"universal"}],"info":{"author":"xcode","version":1},"properties":{"template-rendering-intent":"template","preserves-vector-representation":true}}
   ```
6. 在代码中使用：
   ```swift
   Image("icon-{用途}").resizable().scaledToFit().frame(width: 20, height: 20)
   ```

## 渲染模式

所有图标使用 `template-rendering-intent: template`，颜色由代码中的 `.foregroundColor()` 控制，无需修改 SVG 本身的颜色。

**图标风格**：全部使用线性/描边图标（outline/linear），不使用实心填充（solid/fill）图标。Tabler Icons 的 outline 变体天然符合此规范；Apple SF Symbols 需使用非 `.fill` 变体（如 `mic` 而非 `mic.fill`）。

## 跨平台

| 平台 | 格式 | 路径 |
|------|------|------|
| iOS | SVG → Asset Catalog .imageset | `ios-projects/.../Assets.xcassets/Icons/` |
| Android | SVG → VectorDrawable XML | `android-projects/.../res/drawable/` |
| Web | npm import | `import { IconName } from '@tabler/icons-react'` |

所有平台从 `shared-assets/icons/` 取同一份 SVG 源文件。