ui-design skill: full Phosphor glyph reference page (1512 glyphs)
Mirror assets/fonts/phosphor/codepoints.csv into a readable, greppable markdown table at references/phosphor-glyphs.md — codepoint · kebab · Pascal, with an "In clide" column flagging the ~45 glyphs already wired into PhosphorIcons (reach for those first). Generated by scripts/gen-phosphor- glyphs.py (regenerate after a font bump). Point icons.md + SKILL.md at it. Supports glyph-picking for T-275 (composer permission-mode icons) and any future icon work. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -22,6 +22,7 @@ This skill bundles four concerns that all surface in widget work:
|
||||
| Token selection per surface | [`references/surface.md`](references/surface.md) | Building a new widget or modifying an existing one — "which token does this need" |
|
||||
| Spacing, alignment, control layout | [`references/geometry.md`](references/geometry.md) | Building tab strips, list items, buttons, anything where icons sit next to text or padded edges |
|
||||
| Phosphor icon usage and codepoints | [`references/icons.md`](references/icons.md) | Adding or referencing an icon |
|
||||
| Full Phosphor glyph table (1512, with codepoints) | [`references/phosphor-glyphs.md`](references/phosphor-glyphs.md) | Picking a specific glyph by name/look — find its codepoint, see if it's already defined |
|
||||
|
||||
Read the reference that matches the question. They cross-reference each
|
||||
other where relevant; you don't need to read all four.
|
||||
|
||||
@@ -5,14 +5,19 @@
|
||||
The app bundles Phosphor Icons (v2.0.8, MIT) as TTF fonts at
|
||||
`assets/fonts/phosphor/` (regular, bold, fill weights).
|
||||
|
||||
**Codepoint reference:** `assets/fonts/phosphor/codepoints.csv` — full
|
||||
mapping of all 1512 icon codepoints to kebab-case and PascalCase
|
||||
names. Read this file to look up any icon by name or codepoint.
|
||||
**Glyph reference:** [`phosphor-glyphs.md`](phosphor-glyphs.md) — the full
|
||||
1512-glyph table (codepoint · kebab name · Pascal name) with an **In clide**
|
||||
column flagging the ~45 already wired into `PhosphorIcons`. Read/grep this to
|
||||
pick a glyph; reach for an already-defined one first. (It mirrors
|
||||
`assets/fonts/phosphor/codepoints.csv`; regenerate with
|
||||
`python3 .claude/skills/ui-design/scripts/gen-phosphor-glyphs.py` after a font
|
||||
bump.)
|
||||
|
||||
### Adding an icon
|
||||
|
||||
Find the codepoint in `codepoints.csv`, then add a `static const`
|
||||
entry to `PhosphorIcons` in `lib/widgets/src/icons/phosphor.dart`:
|
||||
Find the codepoint in [`phosphor-glyphs.md`](phosphor-glyphs.md), then add a
|
||||
`static const` entry to `PhosphorIcons` in
|
||||
`lib/widgets/src/icons/phosphor.dart`:
|
||||
|
||||
```dart
|
||||
static const arrowClockwise = PhosphorIconPainter(0xe036);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,58 @@
|
||||
#!/usr/bin/env python3
|
||||
"""Generate the Phosphor glyph reference page for the ui-design skill.
|
||||
|
||||
Mirrors `assets/fonts/phosphor/codepoints.csv` (the full bundled glyph set)
|
||||
into a readable, greppable markdown table at
|
||||
`.claude/skills/ui-design/references/phosphor-glyphs.md`, flagging which
|
||||
glyphs clide already defines in `lib/widgets/src/icons/phosphor.dart`.
|
||||
|
||||
Run from the repo root: python3 .claude/skills/ui-design/scripts/gen-phosphor-glyphs.py
|
||||
"""
|
||||
import csv
|
||||
import pathlib
|
||||
import re
|
||||
|
||||
ROOT = pathlib.Path(__file__).resolve().parents[4]
|
||||
CSV = ROOT / "assets/fonts/phosphor/codepoints.csv"
|
||||
DART = ROOT / "lib/widgets/src/icons/phosphor.dart"
|
||||
OUT = ROOT / ".claude/skills/ui-design/references/phosphor-glyphs.md"
|
||||
|
||||
# Codepoint -> camelCase accessor already defined in PhosphorIcons.
|
||||
defined = {}
|
||||
for m in re.finditer(r"static const (\w+) = PhosphorIconPainter\((0x[0-9a-fA-F]+)\)", DART.read_text()):
|
||||
defined[int(m.group(2), 16)] = m.group(1)
|
||||
|
||||
rows = list(csv.DictReader(CSV.open()))
|
||||
n_def = sum(1 for r in rows if int(r["codepoint"], 16) in defined)
|
||||
|
||||
lines = [
|
||||
"---",
|
||||
"name: phosphor-glyphs",
|
||||
"type: reference",
|
||||
"tags: [icons, phosphor, ui-design]",
|
||||
"---",
|
||||
"",
|
||||
"# Phosphor glyphs — full reference (v2.0.8)",
|
||||
"",
|
||||
f"All **{len(rows)}** glyphs bundled in clide's Phosphor font "
|
||||
"(`assets/fonts/phosphor/`, MIT). Generated from "
|
||||
"`assets/fonts/phosphor/codepoints.csv` — **do not hand-edit**; regenerate with "
|
||||
"`python3 .claude/skills/ui-design/scripts/gen-phosphor-glyphs.py`.",
|
||||
"",
|
||||
f"The **In clide** column flags the **{n_def}** glyphs already wired into "
|
||||
"`PhosphorIcons` (`lib/widgets/src/icons/phosphor.dart`) — reach for those first. "
|
||||
"To use any other glyph, add a one-line `static const` to that class with the "
|
||||
"codepoint below, then `ClideIcon(PhosphorIcons.<name>, size: 13)`. Keep additions "
|
||||
"to icons we actually use — don't bulk-import.",
|
||||
"",
|
||||
"| Codepoint | Name (kebab) | Pascal | In clide |",
|
||||
"|---|---|---|---|",
|
||||
]
|
||||
for r in rows:
|
||||
cp = r["codepoint"]
|
||||
accessor = defined.get(int(cp, 16))
|
||||
in_clide = f"`PhosphorIcons.{accessor}`" if accessor else ""
|
||||
lines.append(f"| `{cp}` | {r['name']} | {r['pascal_name']} | {in_clide} |")
|
||||
|
||||
OUT.write_text("\n".join(lines) + "\n")
|
||||
print(f"wrote {OUT.relative_to(ROOT)} — {len(rows)} glyphs, {n_def} already defined")
|
||||
Reference in New Issue
Block a user