# 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`:

```bash
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**:

```xml
<!-- 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:

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

---

## Searching for Icons

Use `ls | grep` — zero token cost:

```bash
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.
