# 使用指南
在 Taro
文件中引入组件
import { ClIcon } from "mp-colorui";
# 一般用法
<ClIcon iconName="activity" size="large" color="cyan" />
# 使用第三方图标库
栗子:我在阿里巴巴图标库添加了第三方图标,请下载至本地打开
再打开下载文件中的 iconfont.css 文件,文件类似于以下格式:
最后再将此文件内容复制到项目的 css 中,即完成引用。
使用方式如下:
<ClIcon iconName="iconfont icon-RectangleCopy" other />
# 参数说明
# Icon 参数
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
iconName | 图标图案 | string | 参考下表 | - |
size | 图标大小 | string / Number | 大于 10 的整数或者默认支持大小 | normal |
color | 图标颜色 | string | 参考文档 默认色-标准色 | - |
other | 是否为第三方图标库 | boolean | - | false |
# size
参数 | 说明 | 对应尺寸 |
---|---|---|
xsmall | 非常小 | 40 |
small | 略小 | 48 |
normal | 正常 | 56 |
large | 略大 | 64 |
xlarge | 略略大 | 72 |
xxlarge | 很大 | 88 |
slarge | 超大 | 160 |
xslarge | 比大还大 | 240 |
# iconName
appreciate
check
close
edit
emoji
favorfill
favor
loading
locationfill
location
phone
roundcheckfill
roundcheck
roundclosefill
roundclose
roundrightfill
roundright
search
taxi
timefill
time
unfold
warnfill
warn
camerafill
camera
commentfill
comment
likefill
like
notificationfill
notification
order
samefill
same
deliver
evaluate
pay
send
shop
ticket
back
cascades
discover
list
more
scan
settings
questionfill
question
shopfill
form
pic
filter
footprint
top
pulldown
pullup
right
refresh
moreandroid
deletefill
refund
cart
qrcode
remind
delete
profile
home
cartfill
discoverfill
homefill
message
addressbook
link
lock
unlock
vip
weibo
activity
friendaddfill
friendadd
friendfamous
friend
goods
selection
explore
present
squarecheckfill
square
squarecheck
round
roundaddfill
roundadd
add
notificationforbidfill
explorefill
fold
game
redpacket
selectionfill
similar
appreciatefill
infofill
info
forwardfill
forward
rechargefill
recharge
vipcard
voice
voicefill
friendfavor
wifi
share
wefill
we
lightauto
lightforbid
lightfill
camerarotate
light
barcode
flashlightclose
flashlightopen
searchlist
service
sort
down
mobile
mobilefill
copy
countdownfill
countdown
noticefill
notice
upstagefill
upstage
babyfill
baby
brandfill
brand
choicenessfill
choiceness
clothesfill
clothes
creativefill
creative
female
keyboard
male
newfill
new
pullleft
pullright
rankfill
rank
bad
cameraadd
focus
friendfill
cameraaddfill
apps
paintfill
paint
picfill
refresharrow
colorlens
markfill
mark
presentfill
repeal
album
peoplefill
people
servicefill
repair
file
repairfill
taoxiaopu
weixin
attentionfill
attention
commandfill
command
communityfill
community
read
calendar
cut
magic
backwardfill
playfill
stop
tagfill
tag
group
all
backdelete
hotfill
hot
post
radiobox
rounddown
upload
writefill
write
radioboxfill
punch
shake
move
safe
activityfill
crownfill
crown
goodsfill
messagefill
profilefill
sound
sponsorfill
sponsor
upblock
weblock
weunblock
my
myfill
emojifill
emojiflashfill
flashbuyfill
text
goodsfavor
musicfill
musicforbidfill
card
triangledownfill
triangleupfill
roundleftfill-copy
font
title
recordfill
record
cardboardfill
cardboard
formfill
coin
cardboardforbid
circlefill
circle
attentionforbid
attentionforbidfill
attentionfavorfill
attentionfavor
titles
icloading
full
mail
peoplelist
goodsnewfill
goodsnew
medalfill
medal
newsfill
newshotfill
newshot
news
videofill
video
exit
skinfill
skin
moneybagfill
usefullfill
usefull
moneybag
redpacket_fill
subscription
loading1
github
global
settingsfill
back_android
expressman
evaluate_fill
group_fill
play_forward_fill
deliver_fill
notice_forbid_fill
fork
pick
wenzi
ellipse
qr_code
dianhua
icon
loading2
btn