tuix-icon
The icon set, rendered as inline SVG.
tuix-icon renders one icon from the built-in set as an inline SVG. The set is
closed: an unknown name renders nothing.
Every name is listed in the icon catalog.
Sizes
Four box sizes. full takes the size of the parent, which is how the form
controls size the icons they draw.
| Value | Attribute | Box |
|---|---|---|
IconSizeVariant.SMALL | small | 16px |
IconSizeVariant.MEDIUM | medium | 24px |
IconSizeVariant.LARGE | large | 32px |
IconSizeVariant.FULL | full | 100% of the parent |
Colours
color accepts three kinds of value, tried in this order:
A TextVariant such as error or section, resolved against the light or
dark palette depending on dark.
Palette key such as PRIMARY_600, resolved against the light palette.#585A9D or rgb(88 90 157).Fill
The icons are strokes on a transparent <svg fill="none">, so color on its
own draws an outline. fill replaces that none as well: it paints the area
the outline encloses, while color still draws the outline itself. That works
on every icon, not a subset. Where a path is open, like the check mark in
circle-check, what gets painted is the area the path implies.
API
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
name | name | IconName | arrow-down | Which icon to draw |
size | size | IconSizeVariant | small | Box size |
color | color | TextVariant | Palette key | CSS colour | primary | Stroke colour |
fill | fill | TextVariant | Palette key | CSS colour | None | Fill colour for the area the outline encloses |
dark | dark | boolean | false | Resolve a TextVariant colour against the dark palette |
The element fires no events and has no slots.
Notes
- The icon is
display: blockand fills its box, so it needs a flex container to line up next to text. tuix-iconhas no click handling of its own. An interactive icon is what tuix-icon-button is for; it is a real<button>.