Theme:
Ui3nIcon
Icon component for rendering SVG icons with customizable size, color, and transformations.
Props
| Name | Type | Default | Description |
|---|---|---|---|
id | string | undefined | — | Root element id |
icon* | string | — | Icon name |
title | string | undefined | "" | Icon title |
size | string | number | undefined | — | Icon size |
width | string | number | undefined | — | Icon width |
height | string | number | undefined | — | Icon height |
color | string | undefined | — | Icon color |
horizontalFlip | boolean | undefined | — | Flip icon horizontally |
verticalFlip | boolean | undefined | — | Flip icon vertically |
rotate | number | undefined | 0 | Icon rotation in degrees |
Events
| Event Name | Arguments / Value Type | Description |
|---|---|---|
click | value: MouseEvent | — |
CSS Variables
Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.
| Name | Default |
|---|---|
--ui3n-icon-color | var(--color-icon-control-primary-default) |
--ui3n-icon-height | 16px |
--ui3n-icon-width | 16px |
Usage Examples
Basic usage
Basic usage
Icon with different sizes using the size prop
Icon colors
Icon colors
Customize icon color using the color prop
Custom width and height
Custom width and height
Set separate width and height values instead of using size
Transformations
Transformations
Flip and rotate icons using horizontalFlip, verticalFlip and rotate props
Click event
Click event
Handle click events on the icon
Clicked: 0