zcbot/skills/ppt/references/icons.md

4.1 KiB

图标系统 (两层)

几何装饰 (圆点、徽章、品牌条、装饰线) 已在 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. 本地库

路径: <skill_dir>/assets/icons/,详见 INDEX.md。 命名规约: <set>_<name>_<colorhex>_<sizepx>.png(如 tabler_rocket_C00000_128.png)

用之前先 glob 检查本地有没有,有就直接 add_picture,免去网络往返。

A2. fetch_icon.py 拉新图标

# 主红色 128px PNG (推荐)
python <skill_dir>/scripts/fetch_icon.py rocket --set tabler --color C00000 \
    --size 128 -o <skill_dir>/assets/icons/tabler_rocket_C00000_128.png

# 强调色金黄
python <skill_dir>/scripts/fetch_icon.py target --set tabler --color FFC107 \
    --size 128 -o <skill_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. 嵌入幻灯片

slide.shapes.add_picture(
    "<skill_dir>/assets/icons/tabler_rocket_C00000_128.png",
    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 + 文本组合:

from pptx.util import Inches, Pt
stages = ["调研","设计","开发","测试","上线"]
icon_path = "<skill_dir>/assets/icons/tabler_chevron-right_C00000_64.png"
for i, label in enumerate(stages):
    x = 0.7 + i * 2.4
    add_textbox(slide, x, 3.7, 1.8, 0.5, label, 16, bold=True,
                color=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,用单色符号:

✓ ✔ ✗ ✘    对号 / 错号
★ ✦ ✧ ✪    星
→ ← ↑ ↓ ↔  箭头
↗ ↘ ↙ ↖    斜箭头
● ○ ◉ ◎    圆
⬛ ⬜ ◆ ◇    方块菱形
∴ ∵ ⇒ ⇔    数学
№ ¶ § †    文档
# 强调色对号 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 拉的图标进 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 接口。