72 lines
2.0 KiB
Markdown
72 lines
2.0 KiB
Markdown
|
# Icon
|
||
|
|
|
||
|
|
Icon component for displaying various icons.
|
||
|
|
|
||
|
|
## Basic Usage
|
||
|
|
|
||
|
|
Set the `name` attribute to use the built-in icons.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<wd-icon name="add-circle"></wd-icon>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Icon Color
|
||
|
|
|
||
|
|
Set the `color` attribute to customize the icon color.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<wd-icon name="add-circle" color="#0083ff"></wd-icon>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Icon Size
|
||
|
|
|
||
|
|
Set the `size` attribute to customize the icon size.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<wd-icon name="add-circle" size="20px"></wd-icon>
|
||
|
|
<wd-icon name="add-circle" size="25px"></wd-icon>
|
||
|
|
<wd-icon name="add-circle" size="30px"></wd-icon>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Custom Icon
|
||
|
|
|
||
|
|
Wot UI allows you to use custom icons in two ways:
|
||
|
|
|
||
|
|
### 1. Using Custom Font Icons
|
||
|
|
|
||
|
|
First, you need to define your own font icon library, and then set the `class-prefix` attribute to use your custom font icons.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<wd-icon class-prefix="my-icon" name="my-icon-name"></wd-icon>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 2. Using Image Icons
|
||
|
|
|
||
|
|
Set the `name` attribute to an image URL to use image icons. The component automatically detects URLs containing `/`.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<wd-icon name="https://example.com/icon.png"></wd-icon>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Attributes
|
||
|
|
|
||
|
|
| Attribute | Description | Type | Default | Version |
|
||
|
|
| ------------ | ------------------------ | ------ | ------- | ------- |
|
||
|
|
| name | Icon name or image URL | string | - | - |
|
||
|
|
| color | Icon color | string | - | - |
|
||
|
|
| size | Icon size | string \| number | - | - |
|
||
|
|
| class-prefix | Custom icon class prefix | string | wd-icon | - |
|
||
|
|
| custom-style | Custom root node style | string | - | - |
|
||
|
|
|
||
|
|
## Events
|
||
|
|
|
||
|
|
| Event Name | Description | Parameters | Version |
|
||
|
|
| ---------- | ---------------------------------- | ------------ | ------- |
|
||
|
|
| click | Triggered when the icon is clicked | event: Event | - |
|
||
|
|
|
||
|
|
## External Style Classes
|
||
|
|
|
||
|
|
| Class Name | Description | Version |
|
||
|
|
| ------------ | ---------------------- | ------- |
|
||
|
|
| custom-class | Root node custom class | - |
|