amis2/docs/zh-CN/components/icon.md

---
title: Icon 图标
description:
type: 0
group: ⚙ 组件
menuName: Icon
icon:
order: 50
---

> 在 React 项目中使用 Icon 需要引入 `@fortawesome/fontawesome-free`，然后在代码中 `import '@fortawesome/fontawesome-free/css/all.css'`，还有相关的 webpack 配置，具体请参考 [amis-react-starter](https://github.com/aisuda/amis-react-starter) 里的配置

## 基本使用

```schema
{
    "type": "page",
    "body": {
        "type": "icon",
        "icon": "cloud"
    }
}
```

## 颜色及大小调整

icon 基于字体实现，所以可以通过[文字颜色](../../../style/typography/text-color)或[大小](../../../style/typography/font-size)来控制它。

```schema
{
    "type": "page",
    "body": {
        "type": "icon",
        "icon": "cloud",
        "className": "text-info text-xl"
    }
}
```

## 使用图标链接

icon 还可以使用 URL 地址，可以从 [iconfont](https://www.iconfont.cn/) 等网站下载图表的 svg 文件上传到服务器，然后使用对应的地址，比如

```schema
{
    "type": "page",
    "body": {
        "type": "icon",
        "icon": "https://suda.cdn.bcebos.com/images%2F2021-01%2Fdiamond.svg"
    }
}
```

## 使用 v5/v6 版本的 fontawesome

`icon`默认支持[fontawesome v4](https://fontawesome.com/v4/icons/)，如果想要支持 v5 以及 v6 版本的 fontawesome 请设置`vendor`为空字符串。

### fontawesome v5 版本

v5 用 far/fas 等表示前缀，可参考官网[示例](https://fontawesome.com/v5/search?m=free)

```schema
{
    "type":"page",
    "body":[
        {
            "type":"icon",
            "icon":"far fa-address-book",
            "vendor":""
        },
        {
            "type":"icon",
            "icon":"fas fa-address-book",
            "vendor":""
        },
        {
            "type":"icon",
            "icon":"far fa-address-book",
            "vendor":"",
            "className": "text-info text-xl"
        },
        {
            "type":"icon",
            "icon":"fas fa-address-book",
            "vendor":"",
            "className": "text-info text-xl"
        },
        {
          type: "divider",
        },
        {
            "type":"icon",
            "icon":"far fa-bell",
            "vendor":""
        },
        {
            "type":"icon",
            "icon":"fas fa-bell",
            "vendor":""
        },
        {
            "type":"icon",
            "icon":"far fa-bell",
            "vendor":"",
            "className": "text-info text-xl"
        },
        {
            "type":"icon",
            "icon":"fas fa-bell",
            "vendor":"",
            "className": "text-info text-xl"
        },
        {
          type: "divider",
        },
        {
            "type":"icon",
            "icon":"far fa-plus",
            "vendor":""
        },
        {
            "type":"icon",
            "icon":"fas fa-plus",
            "vendor":""
        },
        {
            "type":"icon",
            "icon":"far fa-plus",
            "vendor":"",
            "className": "text-info text-xl"
        },
        {
            "type":"icon",
            "icon":"fas fa-plus",
            "vendor":"",
            "className": "text-info text-xl"
        },
        {
          type: "divider",
        },
        {
            "type":"icon",
            "icon":"far fa-question-circle",
            "vendor":""
        },
        {
            "type":"icon",
            "icon":"fas fa-question-circle",
            "vendor":""
        },
        {
            "type":"icon",
            "icon":"far fa-question-circle",
            "vendor":"",
            "className": "text-info text-xl"
        },
        {
            "type":"icon",
            "icon":"fas fa-question-circle",
            "vendor":"",
            "className": "text-info text-xl"
        }
    ]
}
```

### fontawesome v6 版本

v6 用 fa-regular / fa-solid 等表示前缀，可参考官网[示例](https://fontawesome.com/search?m=free)

```schema
{
    "type":"page",
    "body":[
        {
            "type":"icon",
            "icon":"fa-regular fa-address-book",
            "vendor":""
        },
        {
            "type":"icon",
            "icon":"fa-solid fa-address-book",
            "vendor":""
        },
        {
            "type":"icon",
            "icon":"fa-regular fa-address-book",
            "vendor":"",
            "className": "text-info text-xl"
        },
        {
            "type":"icon",
            "icon":"fa-solid fa-address-book",
            "vendor":"",
            "className": "text-info text-xl"
        }
    ]
}
```

## 属性表

| 属性名    | 类型                                 | 默认值 | 说明                                                                                                                      |
| --------- | ------------------------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------- |
| type      | `string`                             | `icon` | 指定组件类型                                                                                                              |
| className | `string`                             |        | 外层 CSS 类名                                                                                                             |
| icon      | [模板](../../docs/concepts/template) |        | icon 名称，支持 [fontawesome v4](https://fontawesome.com/v4/icons/) 或 通过 registerIcon 注册的 icon、或使用 url          |
| vendor    | `string`                             |        | icon 类型，默认为`fa`, 表示 fontawesome v4。也支持 iconfont, 如果是 fontawesome v5 以上版本或者其他框架可以设置为空字符串 |

## 事件表

> 2.6.1 及以上版本

当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。

| 事件名称   | 事件参数 | 说明           |
| ---------- | -------- | -------------- |
| click      | -        | 点击时触发     |
| mouseenter | -        | 鼠标移入时触发 |
| mouseleave | -        | 鼠标移出时触发 |

### click

鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。

```schema: scope="body"
{
  "type": "icon",
  "icon": "cloud",
  "onEvent": {
    "click": {
      "actions": [
        {
          "actionType": "toast",
          "args": {
            "msgType": "info",
            "msg": "${event.context.nativeEvent.target.className}"
          }
        }
      ]
    }
  }
}
```

### mouseenter

鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。

```schema: scope="body"
{
  "type": "icon",
  "icon": "cloud",
  "onEvent": {
    "mouseenter": {
      "actions": [
        {
          "actionType": "toast",
          "args": {
            "msgType": "info",
            "msg": "${event.context.nativeEvent.type}"
          }
        }
      ]
    }
  }
}
```

### mouseleave

鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。

```schema: scope="body"
{
  "type": "icon",
  "icon": "cloud",
  "onEvent": {
    "mouseleave": {
      "actions": [
        {
          "actionType": "toast",
          "args": {
            "msgType": "info",
            "msg": "${event.context.nativeEvent.type}"
          }
        }
      ]
    }
  }
}
```