2020-07-28 10:03:53 +08:00
|
|
|
---
|
|
|
|
|
title: Icon 图标
|
2021-01-07 23:35:03 +08:00
|
|
|
description:
|
2020-07-28 10:03:53 +08:00
|
|
|
type: 0
|
|
|
|
|
group: ⚙ 组件
|
|
|
|
|
menuName: Icon
|
2021-01-07 23:35:03 +08:00
|
|
|
icon:
|
2020-07-28 10:03:53 +08:00
|
|
|
order: 50
|
|
|
|
|
---
|
2021-01-07 23:35:03 +08:00
|
|
|
|
2020-07-28 10:03:53 +08:00
|
|
|
## 基本使用
|
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
```schema
|
2020-07-28 10:03:53 +08:00
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "icon",
|
|
|
|
|
"icon": "cloud"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
## 颜色及大小调整
|
|
|
|
|
|
|
|
|
|
icon 基于字体实现，所以可以通过[文字颜色](../../../style/typography/text-color)或[大小](../../../style/typography/font-size)来控制它。
|
|
|
|
|
|
|
|
|
|
```schema
|
|
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "icon",
|
|
|
|
|
"icon": "cloud",
|
|
|
|
|
"className": "text-info text-xl"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
2020-07-28 10:03:53 +08:00
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| --------- | -------- | ------ | ------------------------------ |
|
|
|
|
|
| type | `string` | `icon` | 指定组件类型 |
|
|
|
|
|
| className | `string` | | 外层 CSS 类名 |
|
|
|
|
|
| icon | `string` | | icon 名，只支持 fontawesome v4 |
|
