An inline stroke icon from the set the templates draw their own controls with, sized in pixels and colored by the text around it.
Example
import { Icon } from "@elements/ui/icon";
import { Button } from "@elements/ui/button";
<Icon name="x" />
<Icon name="alert" label="Warning" />
<Button variant="secondary"><Icon name="mail" /> Email</Button>
Parts
| Part |
What it is |
.icon |
The <svg>: a 24 by 24 grid, 2px strokes in currentColor, width and height from size. Templates size icons inside them from --icon-size. |
iconMarkup(name, size, label, class) |
The same <svg> as a string, for code that builds HTML strings. |
Attributes
| Attribute |
Type |
Default |
Description |
name |
IconName |
(required) |
One of the names below. |
size |
number |
16 |
Width and height in pixels. |
label |
string |
"" |
Accessible name: the icon becomes an image (role=img, aria-label). Without one it is decorative (aria-hidden). |
class |
string |
"" |
Extra classes on the <svg>. |
Data attributes
| Attribute |
Values |
On |
data-icon |
the name |
.icon |
Accessibility
- Decorative by default: aria-hidden="true" and focusable="false", so a button's name comes from its text or label, not from the icon.
- With label the icon is an image with that name.
Names
x, check, minus, plus, chevron-down, chevron-up, chevron-left, chevron-right, chevrons-up-down, arrow-left, arrow-right, search, circle, dot, more-horizontal, more-vertical, mail, trash, pencil, settings, user, calendar, copy, download, upload, info, alert, external-link, loader, heart, star, bold, italic, superscript, subscript, underline, folder, file, home, slash, check-circle, alert-circle, corner-down-left, bell, image, music, shield, user-plus, cloud, inbox, chevrons-left, chevrons-right, grip-vertical, grip-horizontal, panel-left, panel-right, layout-dashboard, pause, play, monitor, smartphone, trending-up, trending-down, paperclip, file-text, video, globe, arrow-down, arrow-up, square, refresh-cw, thumbs-up, thumbs-down, share, mic, sparkles, at-sign, message-square, move-horizontal, eye, eye-off, pipette, waves, clock, undo, redo, strikethrough, code, link, unlink, list, list-ordered, list-checks, quote, square-code, separator-horizontal, align-left, align-center, align-right, align-justify, highlighter, pilcrow, heading, heading-1, heading-2, heading-3, heading-4, parentheses, braces, variable, type, hash, key, wrap-text, case-sensitive, whole-word, regex, replace, replace-all, image-plus, maximize-2, minimize-2, scissors, clipboard, eraser, arrow-left-to-line, arrow-right-to-line
See also