跳到主要内容

图标 Icon

基于字体的图标集,可以通过 Icon 组件使用,也可以在其他组件中通过 icon 属性引用

用法示例

基础用法

<ti-icon name="plus" size="30" color="#f60"></ti-icon>

ti-icon API

属性 Properties

名称类型必填默认值说明备注
namestring-Icon 名字-
rotatestring-旋转-
colorstring-颜色-
sizenumber-大小-
hyphenstring-连接符-
spinbooleanfalse旋转动画-
prefixstring-类名前缀-
icon-stylestring-取值:'' lovely popular-
ext-stylestring | Record<string, string>-根节点样式-

外部样式类 External Classes

类名说明备注
ext-class扩展样式类名-

CSS 变量 CSS Variable

变量默认值说明备注
--icon-font-sizeinherit字体图标大小-
--icon-colorinherit字体图标颜色-

图标展示

right-custom
share
notice
addressright
addressreceiving
intracity
delivery
checkbox-hollow
douyin
alipay
kuaishou
xiaohongshu
baidu
checkbox
location
selected
phone
user-account-setting
colon
error
right
list
view
recommend
speaker
profile
home
cart
connect
add-plain
arrange
category
phone-plain
warning
share-hwq
play-plain
vip
wechat
qq
weibo
share-wechat-moments
save
qrcode
goods
link
picture
clock-alarm
tabbar-category-highlight
tabbar-cart-highlight
tabbar-mine-highlight
tabbar-vip-highlight
tabbar-home-highlight
tabbar-cart
tabbar-home
tabbar-vip
tabbar-mine
tabbar-category
search
default-pic
rate-star-highlight
rate-star
go-to-top
to-receive
mine-to-pay
to-refund
to-comment
to-deliver
camera-point
clear
question
store
info
filter
stepper-minus
checked
minus
stepper-plus
positioning
plus
sort-inactive
arrow-down
required
arrow-up
arrow-right
address
scan
close
delete
nav-back