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