Icon 图标
图标用于可视化地表示操作和信息。点击任意图标即可复制其名称。
图标使用
使用 name 属性指定图标。点击任意图标卡片即可复制使用代码。
按需引入
图标组件支持按需引入：
vue
<script setup>
import { UIcon } from 'ume-ui';
import 'ume-ui/icon/index.css';
</script>
<template>
<u-icon name="search" />
</template>基础用法
vue
<template>
<u-icon name="search" size="20"></u-icon>
<u-icon name="favorfill" size="20" color="#e6a23c"></u-icon>
<u-icon name="roundclosefill" size="20" color="#f56c6c"></u-icon>
<u-icon name="roundcheckfill" size="20" color="#67c23a"></u-icon>
</template>自定义尺寸
使用 size 属性设置图标尺寸。
vue
<template>
<u-icon name="favor" size="16"></u-icon>
<u-icon name="favor" size="24"></u-icon>
<u-icon name="favor" size="32"></u-icon>
<u-icon name="favor" size="48"></u-icon>
</template>自定义颜色
使用 color 属性设置图标颜色。
vue
<template>
<u-icon name="favorfill" size="24" color="#409eff"></u-icon>
<u-icon name="favorfill" size="24" color="#67c23a"></u-icon>
<u-icon name="favorfill" size="24" color="#e6a23c"></u-icon>
<u-icon name="favorfill" size="24" color="#f56c6c"></u-icon>
<u-icon name="favorfill" size="24" color="#909399"></u-icon>
</template>图标列表
点击任意图标即可复制 <u-icon name="..." /> 代码。
notification
order
deliver
back
cascades
list
more
scan
settings
questionfill
question
form
pic
filter
top
pulldown
pullup
right
refresh
moreandroid
deletefill
cart
qrcode
remind
delete
home
cartfill
homefill
lock
unlock
activity
friend
square
round
roundaddfill
roundadd
add
notificationforbidfill
fold
appreciatefill
infofill
info
forwardfill
forward
voice
voicefill
wifi
share
barcode
searchlist
down
countdown
noticefill
pullleft
pullright
rankfill
rank
picfill
refresharrow
attentionfill
attention
cut
backwardfill
playfill
stop
tagfill
tag
post
radiobox
upload
writefill
write
radioboxfill
add1
move
recordfill
recordlight
record
sortlight
attentionforbid
attentionforbidfill
piclight
voicelight
full
mail
peoplelist
newsfill
newshotfill
newshot
videofill
video
exit
skinfill
skin
moneybag
subscription
home_light
my_light
community_light
cart_light
we_light
home_fill_light
cart_fill_light
my_fill_light
search_light
scan_light
people_list_light
close_light
add_light
friend_add_light
edit_light
camera_light
refresh_light
back_light
share_light
appreciate_light
message_fill_light
video_light
search_list_light
form_fill_light
favor_fill_light
delete_light
back_android
back_android_light
down_light
round_close_light
round_close_fill_light
group_light
location_light
attention_light
play_forward_fill
subscription_light
notice_forbid_fill
qr_code_light
settings_light
round_link_fill
warn_light
oppose_fill_light
oppose_light
return
appreciate
check
close
location
roundcheckfill
roundcheck
roundclosefill
roundclose
search
unfold
warnfill
warn
camerafill
camera
commentfill
comment
like
notificationfill
API
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 图标名称 | string | '' |
| size | 图标尺寸 (如 '20px', 24) | string | number | '' |
| color | 图标颜色 | string | '' |