| 1 | # SVG Icon Library |
| 2 | |
| 3 | This directory provides **11,600+ high-quality SVG icons** across five libraries that can be directly embedded into SVG files generated by PPT Master. Default Strategist or the Quick Generate main agent chooses at most one primary library from the four stylistic libraries; the brand-logo library (`simple-icons`) may be selected alone or alongside it. |
| 4 | |
| 5 | ## Libraries |
| 6 | |
| 7 | | Library | Style | Count | viewBox | Prefix | |
| 8 | |---------|-------|-------|---------|--------| |
| 9 | | `chunk-filled` | fill · straight-line geometry (sharp corners, rectilinear) | 640 | `0 0 16 16` | `chunk-filled/` | |
| 10 | | `tabler-filled` | fill · bezier-curve forms (smooth, rounded contours) | 1000+ | `0 0 24 24` | `tabler-filled/` | |
| 11 | | `tabler-outline` | stroke / line | 5000+ | `0 0 24 24` | `tabler-outline/` | |
| 12 | | `phosphor-duotone` | duotone · single color + 0.2 opacity backplate (soft depth) | 1200+ | `0 0 256 256` | `phosphor-duotone/` | |
| 13 | | `simple-icons` | **brand logos** (real company / product marks) — single-color silhouettes, color in via `fill` | 3400+ | `0 0 24 24` | `simple-icons/` | |
| 14 | |
| 15 | --- |
| 16 | |
| 17 | ## Per-project icons folder |
| 18 | |
| 19 | This directory is the **global library**. The active resource owner copies chosen icons into the deck's own `<project>/icons/<lib>/` with `icon_sync.py` before SVG authoring: |
| 20 | |
| 21 | ```bash |
| 22 | python3 skills/ppt-master/scripts/icon_sync.py <project_path> tabler-outline/home tabler-outline/bulb simple-icons/github |
| 23 | ``` |
| 24 | |
| 25 | Missing names and a single selection batch that mixes the four stylistic libraries exit non-zero; `simple-icons` may coexist for real brand marks. Once files are under `<project>/icons/`, they form the prepared project asset pool and may be combined freely with user-provided, custom, or imported icons. `finalize_svg.py embed-icons` embeds **project-first**; its per-icon global fallback exists for legacy compatibility, not new asset discovery. |
| 26 | |
| 27 | **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. |
| 28 | |
| 29 | **Imported vectors**: `create-template` reserves the project-local `imported/` |
| 30 | namespace. Each extracted vector lives once at |
| 31 | `<workspace>/icons/imported/<name>.svg` and is referenced as |
| 32 | `data-icon="imported/<name>"`; do not duplicate it under `templates/` or use |
| 33 | `imported/` as a hand-curated style library. |
| 34 | |
| 35 | ## Usage |
| 36 | |
| 37 | Use placeholder syntax **during SVG generation**: |
| 38 | |
| 39 | ```xml |
| 40 | <!-- chunk-filled (sharp, geometric — tech/engineering/enterprise tone) --> |
| 41 | <use data-icon="chunk-filled/home" x="100" y="200" width="48" height="48" fill="#0076A8"/> |
| 42 | |
| 43 | <!-- tabler-filled (rounded, organic — lifestyle/health/home tone) --> |
| 44 | <use data-icon="tabler-filled/home" x="100" y="200" width="48" height="48" fill="#0076A8"/> |
| 45 | |
| 46 | <!-- tabler-outline (light, line-art — refined screen-only showcases) --> |
| 47 | <use data-icon="tabler-outline/home" x="100" y="200" width="48" height="48" fill="#0076A8"/> |
| 48 | |
| 49 | <!-- phosphor-duotone (soft depth — single color renders the backplate at 20% opacity) --> |
| 50 | <use data-icon="phosphor-duotone/house" x="100" y="200" width="48" height="48" fill="#0076A8"/> |
| 51 | |
| 52 | <!-- simple-icons (brand logo — used alone or alongside the deck's primary stylistic library) --> |
| 53 | <use data-icon="simple-icons/github" x="100" y="200" width="48" height="48" fill="#181717"/> |
| 54 | ``` |
| 55 | |
| 56 | **Attributes**: |
| 57 | - `data-icon` — `<library>/<icon-name>` (filename without `.svg`) |
| 58 | - `x`, `y` — Position |
| 59 | - `width`, `height` — Size (recommend 32–48px for legibility) |
| 60 | - `fill` — Color |
| 61 | |
| 62 | `data-icon` is case-sensitive because it resolves a real filename. Bundled library directories and basenames are canonical lowercase: use `tabler-outline/award`, not `tabler-outline/Award`. Custom icons retain the exact case of their files; the resolver intentionally does not lowercase identifiers. |
| 63 | |
| 64 | `finalize_svg.py` auto-embeds all placeholders during post-processing. To run manually: |
| 65 | |
| 66 | ```bash |
| 67 | python3 scripts/svg_finalize/embed_icons.py svg_output/*.svg |
| 68 | ``` |
| 69 | |
| 70 | --- |
| 71 | |
| 72 | ## Searching for Icons |
| 73 | |
| 74 | For a known basename, run `icon_sync.py` directly; it copies and validates without a per-file precheck. |
| 75 | |
| 76 | For an uncertain basename, search only the chosen stylistic library; use `simple-icons` only for a real brand mark: |
| 77 | |
| 78 | ```bash |
| 79 | rg --files "skills/ppt-master/templates/icons/tabler-outline" -g '*chart*.svg' |
| 80 | rg --files "skills/ppt-master/templates/icons/simple-icons" -g '*github*.svg' |
| 81 | ``` |
| 82 | |
| 83 | Do not load a full index or enumerate broad keyword families. Re-pick from the narrow result and rerun the final batch until clean; never switch stylistic libraries for a missing generic icon. |
| 84 | |
| 85 | --- |
| 86 | |
| 87 | ## Style Rules |
| 88 | |
| 89 | **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: |
| 90 | |
| 91 | - **`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. |
| 92 | - **`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. |
| 93 | - **`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. |
| 94 | - **`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. |
| 95 | |
| 96 | > **Two axes to consider when choosing**: |
| 97 | > 1. **Geometry**: straight lines (`chunk-filled`) vs. curves (`tabler-filled` / `phosphor-duotone`) vs. open strokes (`tabler-outline`) |
| 98 | > 2. **Visual weight**: heavy solid (`chunk-filled`) → medium solid (`tabler-filled`) → medium layered (`phosphor-duotone`) → light stroke (`tabler-outline`) |
| 99 | |
| 100 | **One primary bundled stylistic library per deck selection.** Pick one of `chunk-filled` / `tabler-filled` / `tabler-outline` / `phosphor-duotone` for generic icons (home, chart, users, etc.). If it lacks an exact icon, find the closest available alternative within that library instead of selecting from another bundled stylistic library. This is a catalog-selection rule, not a prohibition on combining assets that already exist in the project's `icons/` directory. |
| 101 | |
| 102 | **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 **alone or 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. |
| 103 | |
| 104 | | Use `simple-icons` for | Do NOT use `simple-icons` for | |
| 105 | |------------------------|-------------------------------| |
| 106 | | Customer / partner / ecosystem logos on a "trusted by" page | Generic concepts (home, chart, settings, etc.) | |
| 107 | | Tech stack icons on architecture / integration diagrams | Replacing a missing icon in `chunk-filled` / `tabler-*` / `phosphor-duotone` | |
| 108 | | Social media handles in a footer | Decorative / illustrative purposes | |
| 109 | |
| 110 | ⚠️ During bundled selection, choose generic icons from only one of the four **stylistic** libraries. `simple-icons` may be selected at the same time for real brand marks. Project-local assets are already prepared material and are not subject to a runtime mixing ban. |
| 111 |