mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:28:37 +08:00
1.6 KiB
Executable File
1.6 KiB
Executable File
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"
}
}
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string |
icon |
指定组件类型 |
className | string |
外层 CSS 类名 | |
icon | string |
icon 名,支持 fontawesome v4 或使用 url |