Tune UIIcon Component
Icons are fundamental elements in interface design, used to represent common operations, navigation hints, status indicators, etc., making the interface more intuitive. Tune UI provides a set of commonly used icons, supporting custom size, color, and type.
Basic Usage
Tune UI has a rich set of built-in icons. Specify the icon name through the icon attribute.
Icon Size
You can customize the icon size through the size attribute, with the unit being px.
Icon Color
There are two ways to customize icon color:
- Use the
colorattribute to specify a custom color value - Use the
typeattribute to use theme colors
Custom Colors
Theme Colors
Custom Icons
In addition to built-in icons, you can also introduce custom icons through the customIcon attribute.
customIcon property<t-icon customIcon="custom-icon" />
Icon Categories
Below are all available icons, grouped by different categories. Click on an icon to copy its name.
Action Icons
Navigation Icons
File Icons
Media Icons
Communication Icons
Status Icons
Social Media Icons
Weather Icons
User Icons
Chart & Data Icons
Settings & Tools Icons
Other Icons
Icon API
Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| icon | Icon name | string | - | success-to |
| size | Icon size (px) | number | - | 16 |
| color | Icon color | string | - | - |
| type | Icon theme type | string | default / primary / success / info / warning / danger | - |
| customIcon | Custom icon name | string | - | - |
Slots
| Slot Name | Description |
|---|---|
| default | Content inside icon |
Style Variables
The icon component uses the following style variables, which can be customized through SCSS variables:
| Variable Name | Description |
|---|---|
| $theme-color-primary | Theme color - Primary |
| $theme-color-success | Theme color - Success |
| $theme-color-info | Theme color - Info |
| $theme-color-warning | Theme color - Warning |
| $theme-color-danger | Theme color - Danger |