Icon
An icon by name from a registered icon set: register SVG strings once with icons({ name: '<svg…>' }) from @dynshift/layr/react. color is the icon's colour (currentColor).
Registering an icon set
Icon shows an icon by name from the icons you register. Register SVG strings once with icons({ name: '<svg…>' }) from @dynshift/layr/react (here in a .react { } block); any icon library's SVGs work. Draw the shapes in currentColor and the Icon's color colours them. Give a label when the icon means something on its own; without one it is decorative and hidden from screen readers.
import { icons } from '@dynshift/layr/react'
Page(
.name(Icons)
.route('/')
.react {
icons({
star: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>',
heart: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 21s-7-4.4-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.6-9.5 9-9.5 9z"/></svg>',
})
}
Scaffold(
.config(color: canvas)
.body(
Row(
.config(gap: 16, padding: all(24), yAlign: mid)
Icon(.config(size: 28, color: gold, label: 'Starred', name: 'star'))
Icon(.config(size: 28, color: ember, label: 'Liked', name: 'heart'))
Text('Starred and liked')
)
)
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
name | txt | Icon name. | |
size | len | 24 | Icon size. |
color | color | Icon colour. | |
label | txt | Accessible label; omit for decorative icons. | |
margin | insets | Space outside the object: all(8), sym(x: 8, y: 4), only(top: 8). | |
opacity | num | Opacity from 0 to 1. | |
hide (hidden) | bool | Removes the object from layout and the accessibility tree. | |
shrink | num | 1 | Shrink priority when space runs out. Lower shrinks first; 0 never shrinks. |
flex | num | 1 | Share of remaining space for fill sizes. |
cursor | auto | pointer | text | grab | grabbing | move | notAllowed | crosshair | none | Pointer cursor. | |
className (class) | txt | Extra CSS class names: styling hooks for your own stylesheet (hover rules, third-party CSS). |
Slots
.name: text, the default slot