IBest-UI

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 })
    }
  }
}

图标合集(点击可复制名称) ​

基础图标
arrow
arrow-left
arrow-up
arrow-down
arrow-double-left
arrow-double-right
success
cross
plus
minus
fail
circle
线框风格
location-o
like-o
star-o
phone-o
setting-o
fire-o
coupon-o
cart-o
shopping-cart-o
cart-circle-o
friends-o
comment-o
gem-o
gift-o
point-gift-o
send-gift-o
service-o
bag-o
todo-list-o
balance-list-o
close
clock-o
question-o
passed
add-o
gold-coin-o
info-o
play-circle-o
pause-circle-o
stop-circle-o
warning-o
phone-circle-o
music-o
smile-o
thumb-circle-o
comment-circle-o
browsing-history-o
underway-o
more-o
video-o
shop-o
shop-collect-o
share-o
chat-o
smile-comment-o
vip-card-o
award-o
diamond-o
volume-o
cluster-o
wap-home-o
photo-o
gift-card-o
expand-o
medal-o
good-job-o
manager-o
label-o
bookmark-o
bill-o
hot-o
hot-sale-o
new-o
new-arrival-o
goods-collect-o
eye-o
delete-o
font-o
contact-o
notes-o
records-o
cash-back-record-o
newspaper-o
discount-o
completed-o
user-o
description-o
balance-o
refund-o
birthday-cake-o
orders-o
tv-o
envelop-o
flag-o
flower-o
filter-o
bar-chart-o
chart-trending-o
brush-o
bullhorn-o
hotel-o
cashier-o
warn-o
calendar-o
bulb-o
user-circle-o
desktop-o
apps-o
home-o
back-top
search
points
edit
qr
qr-invalid
closed-eye
down
scan
revoke
free-postage
certificate
logistics
after-sale
exchange
upgrade
ellipsis
sign
failure
ecard-pay
peer-pay
balance-pay
credit-pay
debit-pay
cash-on-deliver
other-pay
tosend
pending-payment
paid
aim
idcard
replay
shrink
shield-o
guide-o
cash-o
link-o
miniprogram-o
list-switch
list-switching
实底风格
location
like
star
phone
setting
fire
coupon
cart
shopping-cart
cart-circle
friends
comment
gem
gift
point-gift
send-gift
service
bag
todo-list
balance-list
clear
clock
question
checked
add
gold-coin
info
play-circle
pause-circle
stop-circle
warning
phone-circle
music
smile
thumb-circle
comment-circle
browsing-history
underway
more
video
shop
shop-collect
share
chat
smile-comment
vip-card
award
diamond
volume
cluster
wap-home
photo
gift-card
expand
medal
good-job
manager
label
bookmark
bill
hot
hot-sale
new
new-arrival
goods-collect
eye
delete
font
contact
notes
records
cash-back-record
newspaper
discount
completed
user
description
wechat
wechat-pay
wechat-moments
qq
alipay
weibo
photograph
youzan-shield
umbrella-circle
bell
printer
map-marked
card
add-square
live
lock
audio
graphic
column
invitation
play
pause
stop
weapp-nav
ascending
descending
bars
wap-nav
enlarge
photo-fail
sort

API ​

@Props ​

参数说明类型默认值
name图标名称或图标地址, 具体名称可参考上方图标合集ResourceStr''
color图标颜色ResourceColor''
iconSize图标大小number | string16
iconRadius图标圆角Length | BorderRadiuses | LocalizedBorderRadiuses0

Events ​

事件名说明回调参数
onIconClick点击图标时的回调函数-