Samuel Newman
37 lines
1.9 KiB
Markdown
37 lines
1.9 KiB
Markdown
# Icon codegen
|
||
|
||
SVG files under `assets/icons/` are the source of truth. Generated components under
|
||
`src/components/icons/` are committed so icon changes stay visible in review.
|
||
|
||
## Workflow
|
||
|
||
1. Name the SVG after its exact TypeScript export, for example
|
||
`ArrowTop_Stroke2_Corner0_Rounded.svg`.
|
||
Files in `ui/` must use a semantic name followed only by style tokens and include `Filled` or
|
||
`StrokeN`, `CornerN`, and `Rounded`. Brand and community marks are exempt because their public
|
||
names are not UI-style variants.
|
||
2. Put it in the directory whose policy it needs:
|
||
- `ui/` — strict monochrome icons; exactly one optimized path
|
||
- `brands/` — brand marks that may preserve multiple paint roles or basic shapes
|
||
- `community/` — third-party marks
|
||
- `custom/` — raw assets, including multi-path exceptions, that are optimized but not
|
||
component-generated
|
||
- `flags/` — runtime assets, excluded from codegen and optimization
|
||
3. Run `pnpm icons:generate` and commit both the SVG and generated TypeScript.
|
||
|
||
`pnpm icons:check` verifies that optimized SVGs and generated TypeScript are current.
|
||
`pnpm icons:test` runs the focused generator tests. Generation warns, but does not fail, when a
|
||
generated icon uses a viewBox other than 24×24 or 64×64.
|
||
|
||
## Output grouping
|
||
|
||
Grouping has no per-icon manifest. The generator removes style suffixes, tokenizes semantic
|
||
names, buckets them by the first token, and uses the longest shared token prefix as the module
|
||
family. A singleton uses its complete semantic name. Brand and community modules remain in
|
||
their own namespaces.
|
||
|
||
When an existing application import points at an older module, codegen emits a deprecated
|
||
constant alias at that path. This preserves component identity while making the canonical import
|
||
visible to editors. Run `pnpm icons:generate -- --verbose` to list the remaining deprecated
|
||
imports and their locations.
|