113 lines
5.2 KiB
Markdown
113 lines
5.2 KiB
Markdown
# 知习图标系统
|
||
|
||
## 图标来源
|
||
|
||
[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 源文件。
|