feat(icons): adopt Phosphor as the icon system, ship curated 80-icon set

- Restructure assets/icons: drop ui/, rename outline->regular, filled->fill, add bold/ - Pull 80 Phosphor icons in regular weight (all) + fill weight (all) + bold (status set) - Include Phosphor MIT LICENSE - Rewrite icons README with folder map, specs, usage examples, contribution rules Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-29 20:30:02 +00:00
parent 0edb7c627d
commit 5c6d703774
176 changed files with 258 additions and 30 deletions
@@ -1,8 +1,73 @@
 # Icons

-The KDC icon library, organized by visual style:
+The KDC icon system is built on **[Phosphor Icons](https://phosphoricons.com)** (MIT licensed, [`./LICENSE`](./LICENSE)). Phosphor's geometric, even stroke weight pairs cleanly with Manrope.

- `ui/` — generic interface icons (24x24, stroke, currentColor).
- `outline/` — outlined version of the icon set.
- `filled/` — filled version of the icon set.
- `social/` — third-party brand icons (use per their respective brand rules).
+## Folder layout
+
+| Folder | Phosphor weight | Use |
+|--------|------------------|-----|
+| [`regular/`](./regular/) | Regular (1.5px stroke) | **Default.** All UI icons unless a specific case calls for another weight. |
+| [`fill/`](./fill/)       | Fill | Solid version — used for active/selected states (filled vs. outlined toggle), avatars over photography, dense compositions. |
+| [`bold/`](./bold/)       | Bold (2px stroke) | Status icons at small sizes (≤ 16px) where Regular looks faint. Curated set only. |
+| [`social/`](./social/)   | — | Third-party brand marks (GitHub, LinkedIn, X, etc.). Subject to each brand's own usage rules — *not* MIT. |
+
+## Specs
+
+- **viewBox**: `0 0 256 256` (Phosphor's native — scales perfectly to any size).
+- **Color**: every path is `currentColor`. Set the icon's color via `color: …` on the parent.
+- **Default render size**: 24×24 in UI; 20×20 in dense lists; 16×16 only for inline metadata.
+- **Naming**: `kebab-case`, no `icon-` prefix, no weight suffix in the filename (the folder *is* the weight).
+
+## Usage
+
+```html
+<!-- inline SVG, color follows currentColor -->
+<button style="color: var(--color-brand-primary)">
+  <svg width="20" height="20" viewBox="0 0 256 256">
+    <use href="/assets/icons/regular/check.svg#icon" />
+  </svg>
+  Save
+</button>
+```
+
+```css
+/* mask-image trick when you want CSS-only theming */
+.i-check {
+  width: 20px; height: 20px;
+  background: currentColor;
+  mask: url("/assets/icons/regular/check.svg") center / contain no-repeat;
+}
+```
+
+For React/Vue/Solid projects, prefer the official [`@phosphor-icons/react`](https://www.npmjs.com/package/@phosphor-icons/react) (or framework equivalent) — it ships the same SVGs with a typed component API and tree-shakeable imports, and stays in sync with this folder.
+
+## Curated set
+
+This repo doesn't ship Phosphor's full ~1500-icon library — only ~80 icons we actually use, organized by purpose:
+
+**Navigation** — arrow-{left,right,up,down}, caret-{left,right,up,down}, arrow-square-out, house, list, dots-three
+**Actions** — plus, minus, check, x, pencil-simple, trash, copy, download-simple, upload-simple, share-network, floppy-disk, arrows-clockwise
+**Search & sort** — magnifying-glass, funnel, arrows-down-up
+**Status** — info, check-circle, warning, warning-circle, x-circle, question, spinner, clock *(also in `bold/` for small-size legibility)*
+**Objects** — file, folder, image, link, paperclip, tag, bookmark-simple, star, heart, envelope, calendar, bell, globe, map-pin
+**People & access** — user, users, user-plus, lock, lock-open, key, shield
+**Data** — chart-bar, chart-pie, trend-up, trend-down, package, credit-card, currency-dollar
+**Devices** — monitor, device-mobile, wifi-high
+**Editor** — text-b, text-italic, text-align-left, list-bullets, code, quotes
+**Toggles** — eye, eye-slash, play, pause
+**Theme & settings** — sun, moon, gear, sliders
+
+## Adding a new icon
+
+1. Find it on [phosphoricons.com](https://phosphoricons.com).
+2. Add the **regular** SVG to `regular/<name>.svg`.
+3. If a fill counterpart exists upstream, add it to `fill/<name>.svg` with the same name (no `-fill` suffix).
+4. If the icon will be used at ≤16px in a status context, also add the **bold** SVG to `bold/<name>.svg`.
+5. Update this README's curated set list.
+
+## Don't
+
+- Don't mix icon families (Lucide + Phosphor + custom). Pick Phosphor and stay consistent.
+- Don't hardcode hex colors inside the SVG — `currentColor` only.
+- Don't use Duotone, Light, or Thin weights in product UI — they read as low-contrast at small sizes.
+- Don't pluck icons from Figma without re-running them through Phosphor's source set; manual exports drift.