103 lines
5.0 KiB
Markdown
103 lines
5.0 KiB
Markdown
# 图标系统 (两层)
|
|
|
|
> 几何装饰 (圆点、徽章、品牌条、装饰线) 已在 `layouts.md` 起手块以 helper 封装 (`add_dot` / `add_badge` / `add_accent_line` / `add_rect`),直接调用,**不要重写**,**也不要把它们当"图标"用**。本文档处理的是真正的**业务概念图标** (火箭 / 目标 / 雷达 / 齿轮 / 盾牌 ...)
|
|
|
|
## 选图标两层降级
|
|
|
|
```
|
|
1) Iconify 个性化图标 ── 业务概念 (火箭、目标、雷达、齿轮) → 见 §A
|
|
2) Unicode 字形兜底 ── Iconify 没有合适的 (✓ ✗ ★ → ↑) → 见 §B
|
|
```
|
|
|
|
整 deck 选**一个图标集**用到底,不要 tabler 跟 lucide 混用。
|
|
|
|
## §A. Iconify 个性化图标 (本地缓存 + 网络拉取)
|
|
|
|
### A1. 本地库 (两处:只读种子库 + 本 task 已拉)
|
|
- **种子库(只读)**: `<skill_dir>/assets/icons/` —— skill 自带的商务红 tabler 种子集,详见 [INDEX.md](../assets/icons/INDEX.md)。docker 沙盒里 `skills/` 是只读挂载,**只能读、不能往这儿写**。
|
|
- **本 task 已拉**: `<task_dir>/assets/icons/` —— A2 fetch 新图标的落点(可写)。
|
|
|
|
命名规约: `<set>_<name>_<colorhex>_<sizepx>.png`(如 `tabler_rocket_C00000_128.png`)
|
|
|
|
**用之前先 `glob` 两处都查一遍**(种子库 `<skill_dir>/assets/icons/` + 本 task `<task_dir>/assets/icons/`),有就直接 `add_picture`,免去网络往返。
|
|
|
|
### A2. fetch_icon.py 拉新图标
|
|
脚本在 `<skill_dir>/scripts/`(只读可执行);拉下来的图标 `-o` **必须落 `<task_dir>/assets/icons/`**(种子库只读,新图标进 task 目录):
|
|
```bash
|
|
# 主红色 128px PNG (推荐)
|
|
python <skill_dir>/scripts/fetch_icon.py rocket --set tabler --color C00000 \
|
|
--size 128 -o <task_dir>/assets/icons/tabler_rocket_C00000_128.png
|
|
|
|
# 强调色金黄
|
|
python <skill_dir>/scripts/fetch_icon.py target --set tabler --color FFC107 \
|
|
--size 128 -o <task_dir>/assets/icons/tabler_target_FFC107_128.png
|
|
```
|
|
|
|
`--set` 默认 `tabler`(4500+ 商务图标,MIT)。其它选 `lucide / heroicons / material-symbols / carbon / fluent / mdi`。**整 deck 只用一个 set**。
|
|
|
|
PNG 转换需 `pip install cairosvg`(推荐)或 `pip install svglib`。没装也能拿 SVG。
|
|
|
|
### A3. 嵌入幻灯片
|
|
```python
|
|
slide.shapes.add_picture(
|
|
"<task_dir>/assets/icons/tabler_rocket_C00000_128.png", # 路径 = glob 命中的那处(种子库或 task)
|
|
Inches(1.0), Inches(2.5),
|
|
width=Inches(0.8), # 装饰图标 0.5-1.5 in;别超 2 in
|
|
)
|
|
```
|
|
|
|
### A4. 浏览找名字
|
|
打开 https://icon-sets.iconify.design/ 搜关键词,如 "rocket" / "数据" / "shield",拿到名字 (如 `tabler:rocket`) 直接给 fetch_icon.py。
|
|
|
|
### A5. 流程节点 (替代 PENTAGON)
|
|
|
|
需要"调研→设计→开发→测试→上线"这种横向流程时,**不要用 PowerPoint 内置 PENTAGON**(视觉陈旧),改用 Iconify 的 `chevron-right` + 文本组合:
|
|
|
|
```python
|
|
from pptx.util import Inches
|
|
from pptx.enum.text import PP_ALIGN
|
|
# 假设页面顶部已 import pptx_helpers as P,且 slide 已建(见 layouts.md §通用起手)
|
|
stages = ["调研","设计","开发","测试","上线"]
|
|
icon_path = "<task_dir>/assets/icons/tabler_chevron-right_C00000_64.png" # 先 fetch_icon.py 拉到 task,种子库没有 chevron-right_64
|
|
for i, label in enumerate(stages):
|
|
x = 0.7 + i * 2.4
|
|
P.add_textbox(slide, x, 3.7, 1.8, 0.5, label, 16, bold=True,
|
|
color=P.PRIMARY, align=PP_ALIGN.CENTER, name=f"stage_{i}")
|
|
if i < len(stages) - 1: # 节点间放 chevron
|
|
slide.shapes.add_picture(icon_path, Inches(x + 1.85), Inches(3.7),
|
|
width=Inches(0.4))
|
|
```
|
|
|
|
## §B. Unicode 字形 (兜底)
|
|
|
|
Iconify 都没合适的时候用。避 emoji,用单色符号:
|
|
```
|
|
✓ ✔ ✗ ✘ 对号 / 错号
|
|
★ ✦ ✧ ✪ 星
|
|
→ ← ↑ ↓ ↔ 箭头
|
|
↗ ↘ ↙ ↖ 斜箭头
|
|
● ○ ◉ ◎ 圆
|
|
⬛ ⬜ ◆ ◇ 方块菱形
|
|
∴ ∵ ⇒ ⇔ 数学
|
|
№ ¶ § † 文档
|
|
```
|
|
|
|
```bash
|
|
# 强调色对号 96px → PNG
|
|
python <skill_dir>/scripts/render_icon.py "✓" --color "#C00000" --size 96 -o <task_dir>/slides/check.png
|
|
```
|
|
|
|
## §C. 硬规则
|
|
|
|
1. **风格统一** —— 整 deck 只用一个 Iconify set;不要 tabler 跟 lucide 混
|
|
2. **颜色限定** —— 只用 PRIMARY / SECONDARY / ACCENT / GREY,不要每图标独立配色
|
|
3. **大小克制** —— 装饰图标 0.5-1.5 in;不超过 2 in
|
|
4. **不替表意** —— 一个 ★ 不能代替"重点"两字
|
|
5. **避免 emoji** —— 跨系统渲染差异大,且自带颜色冲突主题
|
|
6. **不要每页都堆** —— 装饰是配角,文字是主角
|
|
7. **缓存复用** —— Iconify 拉的图标进 `<task_dir>/assets/icons/`,本 task 内再用直接读,不要重复请求(种子库 `<skill_dir>/assets/icons/` 只读,新图标不往那写)
|
|
|
|
## §D. 不要把 layouts.md helper 当"图标"
|
|
|
|
`add_dot` / `add_badge` / `add_accent_line` / `add_rect` 是几何**装饰**(品牌条、圆点 bullet、编号徽章、装饰短线),不是业务图标。它们底层是 MSO_SHAPE.OVAL/RECTANGLE,但模型不要直接调 MSO_SHAPE —— 全部走 layouts.md 的 helper 接口。
|