Markdown docs
Icon
Icon component uses inlineSVG extension, so don't forget to add icons path in the configuration as seen in inlineSVG docs.
Basic example usage:
<Icon name="warning" />Advanced example usage:
<Icon name="warning" title="This is warning!" boxSize="32" ariaHidden="false" />Without lexer:
{% embed "@spirit/icon.twig" with { props: {
name: 'warning'
}} %}{% endembed %}API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| ariaHidden | bool | true | ✕ | If true, icon is hidden from a11y API |
| boxSize | number | 24 | ✕ | Size of the icon |
| isReusable | bool | true | ✕ | Enables reusability of SVG icons |
| name | string | — | ✔ | Name of the icon, case sensitive |
| title | string | null | ✕ | Optional title to display on hover |
Get the list of name options in the Icon package or your source of icons.
Also, UNSAFE styling props are available, see the Escape hatches section in README to learn how and when to use them.