Paul Roberts
5c6d703774
Lint / lint (push) Has been cancelled
- 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>
74 lines
3.8 KiB
Markdown
74 lines
3.8 KiB
Markdown
# Icons
|
||
|
||
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.
|
||
|
||
## 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.
|