Icon 图标

Aurora Plus 通过独立的 aurora-plus/icons 入口提供可按需导入的图标组件，并支持调整尺寸、颜色和描边宽度。

基础用法

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

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

IconHome

IconSearch

IconSettings

IconBell

IconBrandGithub

IconCheck

IconX

IconChevronRight

IconCode

IconMenu2

IconStar

IconTrash

IconLoader2

IconHeartFilled

<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" />
      <code>IconHeartFilled</code>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { AuIcon } from 'aurora-plus';
import {
  IconBell,
  IconBrandGithub,
  IconCheck,
  IconChevronRight,
  IconCode,
  IconHeartFilled,
  IconHome,
  IconLoader2,
  IconMenu2,
  IconSearch,
  IconSettings,
  IconStar,
  IconTrash,
  IconX,
} from 'aurora-plus/icons';
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-muted);
  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 组件中使用

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

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

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

AuIcon API

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

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

Attributes

属性	说明	类型	默认值
icon	图标组件	Component	null
color	图标颜色	string	''
size	根节点宽高及字号；数字会转换为 px	string / number	''
strokeWidth	图标描边宽度	number	2