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

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

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

基本使用

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

颜色及大小调整

icon 基于字体实现，所以可以通过文字颜色或大小来控制它。

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

使用图标链接

icon 还可以使用 URL 地址，可以从 iconfont 等网站下载图表的 svg 文件上传到服务器，然后使用对应的地址，比如

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

使用 v5/v6 版本的 fontawesome

icon默认支持fontawesome v4，如果想要支持 v5 以及 v6 版本的 fontawesome 请设置vendor为空字符串。

fontawesome v5 版本

v5 用 far/fas 等表示前缀，可参考官网示例

{
    "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 等表示前缀，可参考官网示例

{
    "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	模板		icon 名称，支持 fontawesome v4 或 通过 registerIcon 注册的 icon、或使用 url
vendor	string		icon 类型，默认为fa, 表示 fontawesome v4。也支持 iconfont, 如果是 fontawesome v5 以上版本或者其他框架可以设置为空字符串

事件表

2.6.1 及以上版本

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

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

click

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

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

mouseenter

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

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

mouseleave

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

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