图标组件

图标是界面设计中的基础元素，可用于表示常见操作、导航提示、状态指示等，使界面更加直观。Tune UI 提供了一套常用的图标集合，支持自定义大小、颜色和类型。

基础用法

Tune UI 内置了丰富的图标，通过 icon 属性指定图标名称。

search

home

setting

user

message

document

calendar

cloud

image

lock

delete-to

upload

download

edit

info

success-to

close

显示代码

图标尺寸

可以通过 size 属性自定义图标的尺寸，单位为 px。

16px

24px

32px

48px

显示代码

图标颜色

有两种方式可以自定义图标颜色：

1. 使用 color 属性指定自定义颜色值
2. 使用 type 属性使用主题颜色

自定义颜色

#3b82f6

#10b981

#f59e0b

#ef4444

主题颜色

primary

success

warning

danger

info

显示代码

自定义图标

除了内置图标，你还可以通过 customIcon 属性引入自定义的图标。

通过设置customIcon属性可以使用自定义图标

自定义图标示例

<t-icon customIcon="custom-icon" />

注意：使用自定义图标需要先在项目中引入相应的图标字体文件

显示代码

图标分类

以下是所有可用的图标，按照不同的类别进行了分组。点击图标可复制图标名称。

操作类图标

add

add-to

delete

delete-to

edit

edit-to

save

upload

upload-to

download

search

filter

close

close-to

minus

minus-to

collect

link

link-to

link-break

share

print

copy-multiple

screen

amplify

reduce

导航类图标

left

right

up

downward

left-arrow

caret-left

caret-right

caret-up

caret-down

double-left

double-right

left-double

right-double

menu

menu-to

navigation

previous

next

home

return

position

map

horizontal-more

vertical-more

left-circle

right-circle

rotate-left

rotate-right

文件类图标

file

file-folder

folder

folder-add

file-add

file-copy

file-remove

file-text

file-image

file-excel

file-pdf

file-word

file-ppt1

file-jpg

file-gif

file-markdown

file-done

file-exclamation

file-protect

file-unknown

document

Filing

remove-file

媒体类图标

image

camera

volume

play-circle

pause-circle

pause

record

qrcode

通信类图标

message

mail

phone

send

forward

forward-to

cloud

cloud-upload

cloud-download

wifi

network

状态类图标

success

success-to

info

information

information-to

error-to

warning-to

help

lock

unlock

secure

secure-to

filter-error

loading

社交媒体图标

github

google

qq

wechat

weibo

taobao

alipay

ie

apple

天气图标

qingtian

duoyunzhuanqing

qingzhuanduoyun

yintian

xiaoyu

zhongyu

dayu

baoyu

leizhenyu

leiyu

zhenyu

youwu

xiaoxue

zhongxue

daxue

baoxue

yujiaxue

yujiabingbao

bingbao

feng

shachenbao

richu

rila

yejianduoyun

yejianyouyu

yejianyouxue

用户图标

user

add-user

add-multiple-user

multiple-user

user-remove

male

woman

member

fingerprint

图表与数据

chart

chart-pie

data-up

data-glide

count

sort-up

exchange

fluctuate

grade

trendc-hart

设置与工具

setting

seting-to

type

adjust

repair

lightn

scan

poweroff

shutdown

track

code

leak

其他图标

love

like

dislike

assets

badge

annex

calendar

label

nail

floor

city

rocket

woman

branch

afferent

outgoing

read

illustrate

vertical-widen

vertical-reduce

horizontal-widen

menu-contract

menu-expand

magnifier-amplify

magnifier-reduce

inspiration

product

dollar-circle

rate

rate-null

rate-half

显示代码

图标 API

属性

属性名	说明	类型	可选值	默认值
icon	图标名称	string	-	success-to
size	图标大小(px)	number	-	16
color	图标颜色	string	-	-
type	图标主题类型	string	default / primary / success / info / warning / danger	-
customIcon	自定义图标名称	string	-	-

插槽

插槽名	说明
default	图标内部的内容

样式变量

图标组件使用了以下样式变量，可通过 SCSS 变量进行自定义：

变量名	说明
$theme-color-primary	主题色-主要
$theme-color-success	主题色-成功
$theme-color-info	主题色-信息
$theme-color-warning	主题色-警告
$theme-color-danger	主题色-危险