Module icon

Icons.

Provides the glyph a control is marked with under the name of the role it stands for: a screen asks for Icon.Create rather than for a plus sign, so retuning what a role looks like across an interface is a change to this module alone. The whole Lucide catalogue hangs off the same namespace, for a glyph no role covers: <Icon.Rocket/> costs a bundle no more than a direct import does, while a member picked at run time, Icon[name], takes every glyph Lucide draws along with it.

An icon is hidden from assistive technology unless given a role, a title or an aria-* attribute: the control it marks carries the accessible name, and a glyph read out beside it would only name the control a second time.

<button onClick={close}><Icon.Close aria-label="Close"/></button>
Copy

Standard Glyphs

Import the namespace once, then mark a control with any glyph Lucide draws, under the name Lucide gives it.

import { Icon } from "@metreeca/tile-cell/icon";

<button onClick={launch}><Icon.Rocket/> Deploy</button>
Copy

Role Glyphs

Alongside them, the namespace carries role names, standing for what a control does rather than for what it draws. A control takes the role that matches its action, not the glyph that looks right: every control creating a resource takes Create, wherever it appears, so one screen never says with a plus what another says with a pencil, and repointing a role at a different glyph restyles all of them at once. An action no role covers takes a standard glyph until a role is added for it.

<button onClick={create}><Icon.Create/> New Item</button>    // creating, wherever it appears
<button onClick={insert}><Icon.Insert/> Add Member</button>  // adding to a set, a role of its own
<button onClick={launch}><Icon.Rocket/> Deploy</button>      // no role covers deploying, yet
Copy

The roles on offer, under the area each one belongs to:

Styling

A glyph is drawn at --tile--scaling-100, in the colour of the text around it and at --tile--stroke-width, so a control restyles its icon by restyling itself and a theme carries every icon along; the size prop plays no part, the stylesheet overriding it. A one-off takes a class, which Lucide merges into the lucide lucide-<name> list it already carries, or a style, which lands on the element and outranks both the stylesheet and the attributes Lucide sets:

<button style={{ fontSize: "1.5em" }}><Icon.Rocket/> Deploy</button>  // the glyph follows the label
<Icon.Alert class="urgent"/>                                          // joins `lucide lucide-triangle-alert`
<Icon.Sort style={{ strokeWidth: 1.5 }}/>                             // overrides the stroke-width attribute
Copy

From a stylesheet, a glyph is reached either through a class of its own or through the ones Lucide writes, lucide on every glyph and lucide-<name> on each, and takes its measures from the design system rather than from literals. The rule sizing an icon is unlayered at a single class of specificity, so a consumer rule wins by naming an ancestor, whatever order the two sheets are emitted in:

.urgent {
    color: var(--tile--color-fail);
}

tile-toolbar .lucide {
    width: var(--tile--scaling-150);
    height: var(--tile--scaling-150);
    stroke-width: var(--tile--stroke-width);
}
Copy