Glyph
Installation
import { Glyph } from "@o/pipeline/experimental/components/glyph";Usage
Ensures consistent, optical, sizing for icons, checkboxes, and more…
- JB
Note
Glyph is pre-configured for some components, such as Checkbox and choice-based items (menus, selects, and similar controls via the internal choice layer).
You’ll likely only ever need it to wrap icons or logos.
Wrap an element with Glyph to size it to the standard glyph metric; a 16px frame that centers 14px glyph content.
Layers (200% scale)
- Frame
- Glyph
render
Glyph surfaces the render prop for full HTML control.
In this case, a button.
Overrides
Setting an explicit size-* class on the child overrides the default glyph size for the odd-case where optical alignment needs to be nudged.
Avoid setting a size on the element unless you really need to.
DefaultAdjusted (10px)