What
There is no Icon component. Not in resources/, and not in @stacksjs/components, which ships 44 components under src/ui/ — accordion, audio, auth, avatar, badge, breadcrumb, button, calendar, card, checkbox, combobox, command-palette, dialog, drawer, dropdown, form, heatmap, image, input, listbox, navigator, notification, pagination, payment, popover, portal, progress, radio, radio-group, select, sidebar, skeleton, spinner, stepper, storage, switch, table, tabs, teleport, textarea, tooltip, transition, video, virtual-list, virtual-table — and none of them is an icon.
So every <Icon name="…"> tag in bench renders nothing. There are 49 of them across 24 files.
How it shows
Silently. An unresolved PascalCase tag is dropped rather than erroring, so nothing in lint, tsc, the build or the conformance gate sees it — gate check 1 only covers @include. The symptom is an empty element where a glyph should be.
dist/judges/submit.html, from <Icon name="check" size="24" class="text-green-600" />:
<div class="flex gap-x-4 items-start"><div class="flex-shrink-0"></div><div><h2 …>Submission receivedThat <div class="flex-shrink-0"></div> is the icon slot. resources/views/contact.stx has 4 <Icon> tags; dist/contact.html contains 2 <svg> elements, both from the header and footer, which draw their glyphs inline.
Found while
Adding a hamburger for #90. <Icon name="menu" size="24"> produced a button containing only its sr-only label — a 20×20 invisible target in the corner. That turned out not to be a problem with my tag.
Why it has gone unnoticed
The components that matter visually already use inline SVG — BenchHeader has 10, RichTextEditor 14, and 68 across the app. The 49 <Icon> tags are in the places where a missing glyph reads as a layout gap rather than a broken page.
Options
- Write a local
Icon.stx.@iconify-json/hugeiconsis installed (5,091 icons) andconfig/ui.tssetsicons: ['hugeicons'], so the data is there; what is missing is a component that resolves a name to a path. Note the names in use would need checking — bench writesname="menu",name="x",name="check", and hugeicons calls themmenu-01,cancel-01and so on. - Replace the 49 tags with inline SVG, which is what the rest of the app does and what stx-standards §10.11 argues against.
Option 1 is better and also makes §10.11 achievable — that rule wants inline SVG replaced by <Icon>, which cannot happen while <Icon> is a no-op.
Note for the conformance pass
stx-standards §10.11 ("MUST use <Icon> instead of inline SVG, and install the collection") reads as satisfied here — the collection is installed and the tag is in use. It is not: the tag resolves to nothing. Another case of a rule that has to be re-tested against this codebase rather than checked off.