Icon 图标

Aurora Plus 提供可按需导入的图标组件，并支持调整尺寸、颜色和描边宽度。AuIcon 用于统一图标的尺寸、颜色和无障碍属性。

基础用法

从 aurora-plus 导入需要的图标组件：

<script setup>
import { IconHome, IconSearch } from 'aurora-plus';
</script>

<template>
  <IconHome />
  <IconSearch size="20" color="#3478f6" />
</template>

常用图标

图标组件可以直接使用，也可以交给 AuIcon 统一控制尺寸、颜色和描边。

IconHome

IconSearch

IconSettings

IconBell

IconBrandGithub

IconCheck

IconX

IconChevronRight

IconCode

IconMenu2

IconStar

IconTrash

IconLoader2

IconHeartFilled

vue

<template>
  <div class="icon-demo">
    <div v-for="item in iconItems" :key="item.name" class="icon-demo__item">
      <AuIcon :icon="item.component" :size="item.size" :color="item.color" :stroke-width="strokeWidth" />
      <code>{{ item.name }}</code>
    </div>
    <div class="icon-demo__item icon-demo__item--filled">
      <IconHeartFilled :size="28" color="#e5484d" aria-hidden="true" />
      <code>IconHeartFilled</code>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import {
  AuIcon,
  IconBell,
  IconBrandGithub,
  IconCheck,
  IconChevronRight,
  IconCode,
  IconHeartFilled,
  IconHome,
  IconLoader2,
  IconMenu2,
  IconSearch,
  IconSettings,
  IconStar,
  IconTrash,
  IconX,
} from 'aurora-plus';
const strokeWidth = ref(2);
const iconItems = [
  { name: 'IconHome', component: IconHome, color: '#2563eb', size: 26 },
  { name: 'IconSearch', component: IconSearch, color: '#0f766e', size: 24 },
  { name: 'IconSettings', component: IconSettings, color: '#7c3aed', size: 25 },
  { name: 'IconBell', component: IconBell, color: '#c2410c', size: 24 },
  { name: 'IconBrandGithub', component: IconBrandGithub, color: '#334155', size: 25 },
  { name: 'IconCheck', component: IconCheck, color: '#15803d', size: 24 },
  { name: 'IconX', component: IconX, color: '#dc2626', size: 24 },
  { name: 'IconChevronRight', component: IconChevronRight, color: '#475569', size: 24 },
  { name: 'IconCode', component: IconCode, color: '#0369a1', size: 24 },
  { name: 'IconMenu2', component: IconMenu2, color: '#64748b', size: 24 },
  { name: 'IconStar', component: IconStar, color: '#ca8a04', size: 24 },
  { name: 'IconTrash', component: IconTrash, color: '#be123c', size: 24 },
  { name: 'IconLoader2', component: IconLoader2, color: '#4f46e5', size: 24 },
];
</script>
<style scoped>
.icon-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}
.icon-demo__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 82px;
  border: 1px solid var(--au-color-border-lighter);
  border-radius: 8px;
  color: var(--au-color-text-secondary);
  flex-direction: column;
  gap: 9px;
}
.icon-demo__item--filled {
  border-style: dashed;
}
.icon-demo__item code {
  color: var(--au-color-text-secondary);
  font-size: 11px;
}
</style>

图标集合

下方目录收录当前版本的全部图标。可以按功能分类、样式或英文组件名筛选，点击图标即可复制组件名。

搜索图标6184 个图标

分类全部分类（6184）版本控制（11） 表情（62） 地图（305） 电气（19） 电商（180） 动物（22） 符号（45） 徽章（37） 货币（76） 计算机（48） 建筑（102） 箭头（433） 交通工具（121） 开发（69） 扩展（13） 逻辑（8） 媒体（182） 品牌（411） 设备（403） 设计（444） 摄影（63） 食物（124） 手势（17） 数据库（47） 数学（90） 数字（236） 天气（72） 通讯（128） 图表（53） 文本（222） 文档（269） 洗护（45） 系统（913） 星座（12） 形状（232） 性别（18） 医疗健康（103） 游戏（77） 运动（89） 字母（318） 自然（65） 样式全部样式描边填充

点击图标复制组件名；在代码中直接从 aurora-plus 按需导入。

在 Aurora Plus 组件中使用

接受图标的 Aurora Plus 组件统一接收 Vue 图标组件本身，而不是字符串名称：

<script setup>
import { AuButton, AuDropdown, IconDownload, IconSettings } from 'aurora-plus';

const menuItems = [
  { id: 'download', label: '下载', icon: IconDownload },
  { id: 'settings', label: '设置', icon: IconSettings },
];
</script>

<template>
  <AuButton :icon="IconDownload">下载</AuButton>
  <AuDropdown :items="menuItems" />
</template>

AuButton、AuDropdown 和 AuContextMenu 的 icon 字段都遵循同一约定，并支持描边和填充图标变体。

AuIcon API

AuIcon 适合需要统一对齐、尺寸或无障碍属性的场景：

<script setup>
import { AuIcon, IconHeart } from 'aurora-plus';
</script>

<template>
  <AuIcon
    :icon="IconHeart"
    size="28"
    color="#e5484d"
    :stroke-width="1.5"
    aria-label="收藏"
  />
</template>

Attributes

属性	说明	类型	默认值
icon	图标组件	Component	null
color	图标颜色	string	''
size	根节点宽高及字号；数字会转换为 px	string / number	''
strokeWidth	图标描边宽度	number	2
ariaLabel	图标的无障碍名称；为空时设置 aria-hidden="true"	string	''

其他 HTML 属性会透传到 .au-icon 根节点。装饰性图标保持默认的隐藏语义；表达操作含义时请提供 aria-label，或在按钮上提供可见文本。

图标变体与查找

图标组件名以 Icon 开头，例如 IconHeart 与 IconHeartFilled。完整图标清单、预览和组件名可在本页的图标集合中查看。