102 lines
6.4 KiB
Markdown
102 lines
6.4 KiB
Markdown
# 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.
|