Icon 图标

语义化的矢量图标，内置 80+ 常用图标。

基础用法

<template>
  <x-icon name="edit" />
  <x-icon name="delete" />
  <x-icon name="search" />
</template>

<script setup>
import { Icon } from '@xto/base'
</script>

图标尺寸

使用 size 属性设置图标尺寸。

<template>
  <x-icon name="edit" :size="16" />
  <x-icon name="edit" :size="24" />
  <x-icon name="edit" :size="32" />
</template>

图标颜色

使用 color 属性设置图标颜色。

<template>
  <x-icon name="edit" color="#409eff" />
  <x-icon name="edit" color="#67c23a" />
  <x-icon name="edit" color="#f56c6c" />
</template>

旋转动画

使用 spin 属性使图标旋转。

<template>
  <x-icon name="loading" spin />
  <x-icon name="refresh" spin />
</template>

线条粗细

使用 stroke-width 属性设置线条粗细。

<template>
  <x-icon name="heart" :stroke-width="1" />
  <x-icon name="heart" :stroke-width="2" />
  <x-icon name="heart" :stroke-width="3" />
</template>

内置图标列表

箭头类

arrow-up

arrow-down

arrow-left

arrow-right

arrow-up-bold

arrow-down-bold

arrow-left-bold

arrow-right-bold

操作类

plus

minus

close

check

check-bold

edit

delete

copy

download

upload

refresh

search

filter

more

more-h

setting

share

状态类

loading

info

success

warning

error

question

用户类

user

user-add

user-group

logout

login

文件类

file

folder

folder-open

document

媒体类

image

video

music

camera

通信类

mail

phone

chat

bell

message

视图类

eye

eye-off

时间类

calendar

clock

history

timer

位置类

location

map

globe

其他图标

star

heart

thumb-up

link

external-link

lock

unlock

key

home

menu

list

grid

fullscreen

fullscreen-exit

zoom-in

zoom-out

print

bookmark

tag

code

terminal

database

server

cloud

gift

主题类

moon

sun

theme

skin

菜单导航类

menu

menu-fold

menu-unfold

sidebar-fold

sidebar-expand

dashboard

chart

chart-pie

chart-line

report

analytics

system

permission

role

user-manage

log

notification

app

API

Props

属性	说明	类型	默认值
name	图标名称	string	—
size	图标尺寸	number | string	24
color	图标颜色	string	—
spin	是否旋转	boolean	false
stroke-width	线条粗细	number	2