mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-24 02:16:12 +08:00
57 lines
1.4 KiB
Markdown
57 lines
1.4 KiB
Markdown
<style>
|
|
@component-namespace demo {
|
|
@b icon {
|
|
|
|
.zan-icon {
|
|
margin: 10px;
|
|
font-size: 45px;
|
|
width: 56px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
## Icon 图标
|
|
|
|
### 基础用法
|
|
|
|
设置`name`属性为对应的图标名称即可。
|
|
|
|
:::demo 所有Icon
|
|
```html
|
|
<zan-icon name="qr-invalid"></zan-icon>
|
|
<zan-icon name="qr"></zan-icon>
|
|
<zan-icon name="exchange"></zan-icon>
|
|
<zan-icon name="close"></zan-icon>
|
|
<zan-icon name="location"></zan-icon>
|
|
<zan-icon name="upgrade"></zan-icon>
|
|
<zan-icon name="check"></zan-icon>
|
|
<zan-icon name="checked"></zan-icon>
|
|
<zan-icon name="like-o"></zan-icon>
|
|
<zan-icon name="like" :style="{ color: '#f44' }"></zan-icon>
|
|
<zan-icon name="chat"></zan-icon>
|
|
<zan-icon name="shop"></zan-icon>
|
|
<zan-icon name="photograph"></zan-icon>
|
|
<zan-icon name="add"></zan-icon>
|
|
<zan-icon name="add2"></zan-icon>
|
|
<zan-icon name="photo"></zan-icon>
|
|
<zan-icon name="logistics"></zan-icon>
|
|
<zan-icon name="edit"></zan-icon>
|
|
<zan-icon name="passed"></zan-icon>
|
|
<zan-icon name="cart"></zan-icon>
|
|
<zan-icon name="arrow"></zan-icon>
|
|
<zan-icon name="gift"></zan-icon>
|
|
<zan-icon name="search"></zan-icon>
|
|
<zan-icon name="clear"></zan-icon>
|
|
<zan-icon name="success"></zan-icon>
|
|
<zan-icon name="fail"></zan-icon>
|
|
```
|
|
:::
|
|
|
|
### API
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
|
|-----------|-----------|-----------|-------------|-------------|
|
|
| name | icon名称 | `string` | `''` | |
|