zcdsj
/
zcbot
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
zcbot/skills/ppt/templates/icons/README.md

6.4 KiB
Raw Blame History

SVG Icon Library

This directory provides 11,600+ high-quality SVG icons across five libraries that can be directly embedded into SVG files generated by PPT Master. Four are stylistic libraries (pick one per deck); one is a brand-logo library (simple-icons) used as an inset alongside the chosen stylistic library.

Libraries

Library Style Count viewBox Prefix
chunk-filled fill · straight-line geometry (sharp corners, rectilinear) 640 0 0 16 16 chunk-filled/
tabler-filled fill · bezier-curve forms (smooth, rounded contours) 1000+ 0 0 24 24 tabler-filled/
tabler-outline stroke / line 5000+ 0 0 24 24 tabler-outline/
phosphor-duotone duotone · single color + 0.2 opacity backplate (soft depth) 1200+ 0 0 256 256 phosphor-duotone/
simple-icons brand logos (real company / product marks) — single-color silhouettes, color in via fill 3400+ 0 0 24 24 simple-icons/

Per-project icons folder

This directory is the global library. At selection time the Strategist copies the chosen icons into the deck's own <project>/icons/<lib>/ with icon_sync.py:

python3 skills/ppt/scripts/icon_sync.py <project_path> chunk-filled/home tabler-outline/bulb

A name the library does not have is reported and the command exits non-zero — re-pick a real one then, not at export. finalize_svg.py embed-icons embeds project-first (from <project>/icons/), falling back to this global library per-icon.

Custom icons: drop your own .svg into <project>/icons/<lib>/ (any <lib>, e.g. custom/) and reference it as data-icon="<lib>/<name>" — it embeds like any library icon.

Usage

Use placeholder syntax during SVG generation:

<!-- chunk-filled (sharp, geometric — tech/engineering/enterprise tone) -->
<use data-icon="chunk-filled/home" x="100" y="200" width="48" height="48" fill="#0076A8"/>

<!-- tabler-filled (rounded, organic — lifestyle/health/home tone) -->
<use data-icon="tabler-filled/home" x="100" y="200" width="48" height="48" fill="#0076A8"/>

<!-- tabler-outline (light, line-art — refined screen-only showcases) -->
<use data-icon="tabler-outline/home" x="100" y="200" width="48" height="48" fill="#0076A8"/>

<!-- phosphor-duotone (soft depth — single color renders the backplate at 20% opacity) -->
<use data-icon="phosphor-duotone/house" x="100" y="200" width="48" height="48" fill="#0076A8"/>

<!-- simple-icons (brand logo — used alongside the deck's primary library, not as a substitute) -->
<use data-icon="simple-icons/github" x="100" y="200" width="48" height="48" fill="#181717"/>

Attributes:

  • data-icon — <library>/<icon-name> (filename without .svg)
  • x, y — Position
  • width, height — Size (recommend 32–48px for legibility)
  • fill — Color

finalize_svg.py auto-embeds all placeholders during post-processing. To run manually:

python3 scripts/svg_finalize/embed_icons.py svg_output/*.svg

Searching for Icons

Use ls | grep — zero token cost:

ls skills/ppt/templates/icons/chunk-filled/ | grep home
ls skills/ppt/templates/icons/tabler-filled/ | grep home
ls skills/ppt/templates/icons/tabler-outline/ | grep chart
ls skills/ppt/templates/icons/phosphor-duotone/ | grep house
ls skills/ppt/templates/icons/simple-icons/ | grep github

Style Rules

No default library — actively choose based on the deck's visual needs. Read the source material first, then pick the library whose visual character best serves the presentation. Each library has a distinct visual personality:

  • chunk-filled — fill style, built from straight-line commands only (M/L/H/V/Z). Sharp, precise right angles; rectilinear geometry; structured and highly legible at small sizes. Visual weight: heavy, solid, architectural.
  • tabler-filled — fill style, built from bezier curves and arcs (C/A). Smooth, rounded, organic contours; warmer and softer than chunk-filled. Visual weight: medium, approachable.
  • tabler-outline — stroke style (line art, default stroke-width 2). Airy, refined, lightweight; uses negative space. Visual weight: light, elegant. Best for screen-only viewing since thin strokes may become hard to read when printed or projected.
  • phosphor-duotone — duotone style; main shape at full opacity plus a backplate of the same color at 20% opacity, producing a soft sense of depth. Visual weight: medium, layered, contemporary.

Two axes to consider when choosing:

  1. Geometry: straight lines (chunk-filled) vs. curves (tabler-filled / phosphor-duotone) vs. open strokes (tabler-outline)
  2. Visual weight: heavy solid (chunk-filled) → medium solid (tabler-filled) → medium layered (phosphor-duotone) → light stroke (tabler-outline)

One presentation = one stylistic library. Pick chunk-filled / tabler-filled / tabler-outline / phosphor-duotone at the start and use it exclusively throughout for generic icons (home, chart, users, etc.). If the chosen library doesn't have an exact icon, find the closest available alternative within that same library — never cross stylistic libraries to fill a gap.

Brand-logo exception (simple-icons). simple-icons is not a stylistic library and does not participate in the "one library" rule. Its job is brand recognition — Slack's purple, GitHub's cat, AWS's color — which is intentionally heterogeneous. Use it alongside the chosen stylistic library, but only for actual company / product / service brand marks. Do not reach for it as a substitute when the chosen stylistic library lacks a generic icon.

Use simple-icons for Do NOT use simple-icons for
Customer / partner / ecosystem logos on a "trusted by" page Generic concepts (home, chart, settings, etc.)
Tech stack icons on architecture / integration diagrams Replacing a missing icon in chunk-filled / tabler-* / phosphor-duotone
Social media handles in a footer Decorative / illustrative purposes

⚠️ Do not mix icons from different stylistic libraries (chunk-filled / tabler-filled / tabler-outline / phosphor-duotone). simple-icons is the sole exception and may co-exist as a brand-logo inset — see the brand-logo exception above.