IBest-UI@HarmonyOS

Appearance

Icon 图标 ​

介绍 ​

基于字体的图标集，可以通过 IBestIcon 组件使用。

引入 ​

ts
import { IBestIcon } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestIcon({ name: 'like' })
    }
  }
}

自定义颜色 ​

自定义颜色

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Row({space: 20}){
      IBestIcon({ name: 'cart-o', color: '#1989fa' })
      IBestIcon({ name: 'fire-o', color: '#ee0a24' })
    }
  }
}

自定义大小 ​

自定义大小

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Row({space: 20}){
      IBestIcon({ name: 'chat-o', iconSize: 20 })
      IBestIcon({ name: 'chat-o', iconSize: 40 })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
name图标名称或图标地址, 具体名称可参考这里ResourceStrarrow
color图标颜色ResourceColor''
iconSize图标大小number | string16
iconRadius 1.19.0图标圆角number | string0

Events ​

事件名说明事件类型
onIconClick点击图标时的回调函数() => void