Skip to main content

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.

LayerSource
per-icon overrideA small sprite of a few names you want to change.
replacementYour own full or partial icon set.
shippedJuneau'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.