跳到主要内容

图标 Icon

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

安装使用

import { TiIcon } from '@titian-design/mobile-react'

用法示例

基础用法

const App: React.FC = () => {
return (
<>
<TiIcon name="plus" size={30} color="#f60" />
</>
)
}

使用自定义图标

在组件层级配置
const App: React.FC = () => {
return (
<TiIcon prefix="weimob-icon" name="plus" />
)
}
在全局配置层控制
危险

该配置会覆盖默认配置,如果需要使用组件库提供的图标,需要组件层级添加 prefix="titian"

const App: React.FC = () => {
return (
<TiConfigProvider iconClassPrefix="weimob-icon">
<TiIcon name="plus" />
<TiIcon name="share" />
</TiConfigProvider>
)
}

TiIcon API

属性 Properties

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

外部样式类 External Classes

类名说明备注
extClass扩展样式类名-

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