Icon 图标

内置 SVG 图标集，通过 name 属性引用，支持尺寸与颜色自定义。

所有图标

x-circle

eye

eye-off

check

chevron-down

chevron-right

chevron-left

chevron-up

x

calendar

warn

spin

circle-check

circle-x

circle-warn

circle-info

circle-loading

spinner

empty-data

plus

refresh

upload

cloud-upload

file

file-image

trash

clock

所有内置图标

vue

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 8px">
    <div
      v-for="name in icons"
      :key="name"
      style="display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; border-radius: 8px; border: 1px solid var(--aui-border, #e2e2e3); background: var(--aui-bg, #fff); min-width: 80px; cursor: default"
    >
      <AIcon :name="name" :size="name === 'empty-data' ? 36 : 20" />
      <span style="font-size: 11px; color: var(--aui-text-3, #8b8b8f); text-align: center; word-break: break-all">
        {{ name }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { AIcon } from '@lite-code/aui-vue'
import type { IconName } from '@lite-code/aui-vue'

const icons: IconName[] = [
  'x-circle', 'eye', 'eye-off', 'check', 'chevron-down', 'chevron-right',
  'chevron-left', 'chevron-up', 'x', 'calendar', 'warn', 'spin',
  'circle-check', 'circle-x', 'circle-warn', 'circle-info', 'circle-loading',
  'spinner', 'empty-data', 'plus', 'refresh', 'upload', 'cloud-upload',
  'file', 'file-image', 'trash', 'clock',
]
</script>

尺寸

通过 size 属性控制图标大小，接受数字（px）或字符串。

16px

20px

24px

32px

40px

通过 size 属性调整大小

vue

<template>
  <div style="display: flex; align-items: center; gap: 24px; flex-wrap: wrap">
    <div
      v-for="size in sizes"
      :key="size"
      style="display: flex; flex-direction: column; align-items: center; gap: 8px"
    >
      <AIcon name="circle-check" :size="size" :style="{ color: 'var(--aui-accent, #6366f1)' }" />
      <span style="font-size: 12px; color: var(--aui-text-3, #8b8b8f)">{{ size }}px</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { AIcon } from '@lite-code/aui-vue'

const sizes = [16, 20, 24, 32, 40]
</script>

颜色

大部分图标使用 currentColor，通过 style.color 或父元素颜色控制。

默认

主题色

成功

警告

错误

次要

通过 style.color 控制颜色

vue

<template>
  <div style="display: flex; align-items: center; gap: 24px; flex-wrap: wrap">
    <div
      v-for="{ label, color } in colors"
      :key="label"
      style="display: flex; flex-direction: column; align-items: center; gap: 8px"
    >
      <AIcon name="circle-check" :size="24" :style="{ color }" />
      <span style="font-size: 12px; color: var(--aui-text-3, #8b8b8f)">{{ label }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { AIcon } from '@lite-code/aui-vue'

const colors = [
  { label: '默认', color: 'var(--aui-text, #213547)' },
  { label: '主题色', color: 'var(--aui-accent, #6366f1)' },
  { label: '成功', color: '#22c55e' },
  { label: '警告', color: '#f59e0b' },
  { label: '错误', color: '#ef4444' },
  { label: '次要', color: 'var(--aui-text-3, #8b8b8f)' },
]
</script>

API

Props

属性	类型	默认值	说明
name	IconName	—	图标名称（必填）
size	number | string	—	图标尺寸，单位 px
class	string	—	自定义 class
style	CSSProperties	—	自定义样式，可设置颜色等

IconName

名称	说明
x-circle	带圆圈的关闭
eye	眼睛（显示）
eye-off	眼睛（隐藏）
check	勾选
chevron-down	向下箭头
chevron-right	向右箭头
chevron-left	向左箭头
chevron-up	向上箭头
x	关闭
calendar	日历
warn	警告感叹号
spin	旋转加载
circle-check	圆形勾选
circle-x	圆形关闭
circle-warn	圆形警告
circle-info	圆形信息
circle-loading	圆弧加载
spinner	带轨道旋转器
empty-data	暂无数据插图
plus	加号
refresh	刷新
upload	上传
cloud-upload	云上传
file	文件
file-image	图片文件
trash	删除
clock	时钟