Guide

SVG and icons

Icons and simple vector art are SVG, written inline or loaded as files. The engine draws them itself, anti-aliased like Chromium, at the size and resolution they are shown at.

Inline SVG

<button class="home">
    <svg width="24" height="24" viewBox="0 0 24 24">
        <path d="M3 11 L12 3 L21 11 V21 H14 V15 H10 V21 H3 Z" fill="currentColor"/>
    </svg>
</button>

An inline <svg> lays out like an image (its width and height, viewBox, preserveAspectRatio), and its shapes are elements of the DOM, styled by the page's CSS. Changing an attribute such as d or r redraws it.

Supported
Shapes	`path` (all commands, arcs), `rect` (with `rx` and `ry`), `circle`, `ellipse`, `line`, `polyline`, `polygon`
Structure	`g`, `a`, `switch`, nested `svg`, `use`, `symbol`, `defs`, the `transform` attribute
Paint	`fill`, `stroke` and their parts (opacity, rule, width, caps, joins, miter limit, dashes), group `opacity`, `currentColor`
Gradients	`linearGradient` and `radialGradient` (with a focal point), `gradientUnits`, `gradientTransform`, `spreadMethod`, `href` to another gradient
Clipping	`clip-path="url(#c)"` on shapes, groups, `use` and nested svgs, with `clip-rule`, transforms and `clipPathUnits`
Masking	`mask="url(#m)"`: luminance masks, or alpha with `mask-type="alpha"`; `maskUnits`, `maskContentUnits`
Styling	Presentation attributes (`fill="red"`), CSS from the page, `:hover` on shapes, color transitions

Not supported: SVG <text>, <image>, pattern, markers, SVG filters, SMIL animation and foreignObject. clip-path and mask are read from the attributes, as SVG files write them, and not on the outermost <svg> (CSS clip-path and mask-image work there, as on any element).

SVG files

An SVG file works as an <img> source or a background-image. It is its own document: the page's styles do not reach inside it.

Icons from Iconify

Any of the 200,000+ icons of Iconify can be shown by its name, with no import:

<button class="save">
    <Icon id="material-symbols:save" /> Save
</button>
<Icon id="mdi:fuel" color="gold" width="32" />
<Icon id={(muted ? "mdi:volume-off" : "mdi:volume-high")} class="speaker" onclick={() => muted = !muted} />

<Icon> compiles to an inline <svg> of your component, with no wrapper element. Classes, class: and style: directives, events, bind:this and query:api work on it, and the component's scoped styles reach it:

<Icon id="mdi:content-save" class="tool" />
<Icon icon="mdi:cog" id="settings" class="tool" />   <!-- icon= names the icon: id is the element's own id -->

<style>
    .tool { color: rgb(160, 170, 190); transition: color 0.15s; }
    .tool:hover { color: white; }
    #settings { font-size: 32px; }
</style>

Name: prefix:name, as the Iconify site shows it. id names the icon unless icon does; then id is the element's own id.
Size: without width or height an icon is 1em high, so it follows the text. Size icons with font-size.
Color: the text's color: the parent's, a class's, :hover's. color="gold" is an inline style, so rules such as :hover do not change it; use a class when the color should change.
A name chosen with ? : needs its expression in parentheses. Only <Icon> with a capital I is the engine's tag.

Icons in a build

Tools → DevCore → Download Used Icons looks through your components, finds the icons they name, and saves exactly those into Assets/Resources/DevCoreUIEngine/Icons/Iconify. Whole icon sets are never downloaded. At runtime the saved files are used first; an icon that is missing from them is fetched from the Iconify API and kept in memory only.

Licenses

Icon sets have different licenses, and the license belongs to the set, not to the icon data. Before any icon is downloaded the engine asks for the licenses of the sets you use and applies one rule:

Accepted	Refused
MIT, ISC, Apache-2.0, BSD, 0BSD, Unlicense, CC0, OFL: commercial use allowed, no credit required	CC BY, non-commercial, share-alike, no-derivatives, GPL, and unknown licenses

An icon of a refused set is not downloaded and is drawn as a blocked sign, so the problem is visible. The license texts of the sets your game does use are written to Assets/DevCoreUIEngine/Licenses/iconify_icons_licence.txt, which every build includes.