Appearance
视图
x-icon
合并 WeUI Icon 和 阿里iconfont 图标库的组件,代码中引入该组件可以同时使用两套图标。
- 使用
阿里iconfont前需要申请加入项目组「今日投资·Icon」; - 新增图标后,下载最新的
icon css样式替换/cix/css/iconFont.wxss文件中的代码; - 此组件请在
app.json中全局引入
json
"usingComponents": {
"x-icon": "/cix/components/x-icon/x-icon"
}"usingComponents": {
"x-icon": "/cix/components/x-icon/x-icon"
}| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| extClass | string | 组件扩展类名 | ||
| type | string | outline | 微信官方组件可用Icon类型,可选值 outline(描边),field(填充) | |
| icon | string | Icon名字 | ||
| size | number | 20(微信),16(阿里) | Icon的大小,单位 px(微信为width属性,阿里为font-size属性) | |
| color | string | black | Icon的颜色,默认黑色 | |
| ali | boolean | false | 是否使用阿里iconfont |
示例代码
html
<x-icon type="field" icon="add" color="black" size="{{25}}"></x-icon><x-icon type="field" icon="add" color="black" size="{{25}}"></x-icon>