Mercurial
comparison design_system/ICONS.md @ 254:2b6e732087ff
[ui] Add complete native component catalog
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Tue, 04 Aug 2026 15:12:09 -0700 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| 253:fdf3816959cb | 254:2b6e732087ff |
|---|---|
| 1 # Zenbu UI icons | |
| 2 | |
| 3 `zen-icon` is the only icon renderer used by Zenbu UI. It renders first-party | |
| 4 SVG geometry in light DOM, inherits the current text color, and has no font, | |
| 5 emoji, package, or network dependency. | |
| 6 | |
| 7 ```html | |
| 8 <zen-icon name="search"></zen-icon> | |
| 9 <zen-icon name="archive" label="Archive repository" size="1.25rem"></zen-icon> | |
| 10 ``` | |
| 11 | |
| 12 Icons without `label` are decorative and receive `aria-hidden="true"`. An icon | |
| 13 with a label receives `role="img"` and the matching accessible name. Buttons | |
| 14 that already have an accessible name should use an unlabeled icon. | |
| 15 | |
| 16 ## Names | |
| 17 | |
| 18 The initial set contains: | |
| 19 | |
| 20 ```text | |
| 21 add alert archive arrow-down arrow-left arrow-right arrow-up | |
| 22 branch calendar check chevron-down chevron-left chevron-right chevron-up | |
| 23 close code copy download error external file folder history info | |
| 24 menu moon more pause play repository retry search settings sun | |
| 25 trash upload user | |
| 26 ``` | |
| 27 | |
| 28 Unknown names render the `alert` fallback rather than inserting authored HTML. | |
| 29 The catalog at `/icons` renders the authoritative runtime list. | |
| 30 | |
| 31 ## Hard requirements | |
| 32 | |
| 33 - Do not use emoji or text glyphs as interface icons. | |
| 34 - Do not add inline SVG outside `components/icon.js`. | |
| 35 - Do not import an external icon package or icon font. | |
| 36 - Use `currentColor` through `zen-icon`; the owning component must obtain that | |
| 37 color from a `--zen-color-*` token. | |
| 38 - Add new geometry to the first-party icon registry and include a catalog test. | |
| 39 | |
| 40 `//design_system/test:design_system_policy_test` enforces these requirements. |