Icons and Sprites
juneau-icons.js is a dependency-free icon registry. It maps an icon name to inline SVG that references one
in-document symbol sprite, using symbol ids of the form juneau-sym-{stem}.
Sprite layers
Every chrome glyph resolves through up to three sprite layers; the first hit wins.
| Layer | Source |
|---|---|
| per-icon override | A small sprite of a few names you want to change. |
| replacement | Your own full or partial icon set. |
| shipped | Juneau's own set, juneau-symbols.svg (ViewsMixin.SYMBOLS_SVG_PATH). |
All three use the same juneau-sym-{stem} symbol ids. A name present in none of them draws nothing.
Configure the layers once per page, before the chrome first draws, with attributes on the script tag:
<script src="/console/juneau-icons.js"
data-juneau-icon-replacement="/my-set.svg"
data-juneau-icon-override="/my-overrides.svg"></script>
or with an equivalent script call:
JuneauViews.icons.sprites({ replacementUrl: "/my-set.svg", overrideUrl: "/my-overrides.svg" });
sprites(...) returns a Promise reporting, per layer, whether it loaded, failed or was absent, and per stem which
layer won. The page paints whether or not you await it. A layer that fails to load (including a blocked
cross-origin fetch) is skipped and the other layers fill in. A call after first paint is ignored.
Material Symbols
The optional Material Symbols Outlined sprite is served at ViewsMixin.SYMBOLS_MATERIAL_SVG_PATH. Select it as the
replacement layer with JuneauViews.icons.pack("material") or data-juneau-icon-pack="material". Stems the
Material file does not carry fall back to the shipped glyph. An explicit replacementUrl wins over the pack.
Registering your own icons
JuneauViews.icons.registerIcon("petstore-paw", "<svg viewBox='0 0 24 24'>...</svg>");
JuneauViews.icons.resolveIcon("petstore-paw"); // markup, or null when unknown
registerIcon adds an icon that your application draws itself; it does not change a chrome stem. To change a
built-in chrome glyph, put the replacement on the override sprite.
A RowAction.icon and any catalog icon name resolve through this registry.
Dev-mode warnings
Failed loads, unknown ids and late registrations warn only when dev mode is on: set JuneauViews.dev = true or add
data-juneau-dev to the icons script tag. Production is silent and falls back to the shipped glyph.