Icon 图标

AI UI 提供了独立的图标包 @axin666/ai-ui-icons，包含常用的 SVG 图标组件。

安装

# npm
npm install @axin666/ai-ui-icons

# pnpm
pnpm add @axin666/ai-ui-icons

# yarn
yarn add @axin666/ai-ui-icons

基本使用

按需引入

按需引入单个图标组件：

<script setup lang="ts">
import { Loading, Edit, Delete } from '@axin666/ai-ui-icons'
</script>

<template>
  <div>
    <Loading />
    <Edit />
    <Delete />
  </div>
</template>

<template>
  <div style="display: flex; align-items: center; gap: 16px">
    <Loading />
    <Edit />
    <Delete />
  </div>
</template>

<script setup lang="ts">
import { Loading, Edit, Delete } from '@axin666/ai-ui-icons'
</script>

全局注册

如果需要全局注册所有图标组件：

import { createApp } from 'vue'
import { install as installIcons } from '@axin666/ai-ui-icons'
import App from './App.vue'

const app = createApp(App)
app.use(installIcons)
app.mount('#app')

注册后，可以在模板中直接使用：

<template>
  <AiIconLoading />
  <AiIconEdit />
  <AiIconDelete />
</template>

图标列表

当前可用的图标组件：

Loading

Edit

Delete

<template>
  <div class="icon-grid">
    <div
      v-for="icon in icons"
      :key="icon.name"
      class="icon-item"
      @click="handleIconClick(icon.name)"
    >
      <div class="icon-wrapper">
        <component :is="icon.component" />
      </div>
      <div class="icon-label">{{ icon.label }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Loading, Edit, Delete } from '@axin666/ai-ui-icons'

const icons = [
  { name: 'Loading', label: 'Loading', component: Loading },
  { name: 'Edit', label: 'Edit', component: Edit },
  { name: 'Delete', label: 'Delete', component: Delete },
]

function handleIconClick(name: string) {
  console.log('Icon clicked:', name)
}
</script>

<style scoped>
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1px;
  padding: 0;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 8px;
  background: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}

.icon-item:hover {
  background: #fafafa;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-bottom: 8px;
  color: #333;
}

.icon-wrapper :deep(svg) {
  width: 24px;
  height: 24px;
}

.icon-label {
  font-size: 12px;
  color: #666;
  text-align: center;
  line-height: 1.4;
}
</style>

加载图标

加载图标支持旋转动画，常用于表示加载状态。可以通过 CSS 控制大小和颜色：

默认大小

24px

32px 红色

40px 绿色

<template>
  <div style="display: flex; flex-direction: column; gap: 24px">
    <div style="display: flex; align-items: center; gap: 16px">
      <Loading />
      <span>默认大小</span>
    </div>
    <div style="display: flex; align-items: center; gap: 16px">
      <Loading style="width: 24px; height: 24px" />
      <span>24px</span>
    </div>
    <div style="display: flex; align-items: center; gap: 16px">
      <Loading style="width: 32px; height: 32px; color: #ff4d4f" />
      <span>32px 红色</span>
    </div>
    <div style="display: flex; align-items: center; gap: 16px">
      <Loading style="width: 40px; height: 40px; color: #22c55e" />
      <span>40px 绿色</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Loading } from '@axin666/ai-ui-icons'
</script>

<style scoped>
:deep(svg) {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

开发指南

添加新图标

要添加新的图标：

1. 将 SVG 文件放入 packages/icons/svg/ 目录
2. 运行 pnpm build 重新生成组件
3. 新图标会自动出现在 src/ 目录和 index.ts 中

图标规范

• SVG 文件应使用标准的 SVG 格式
• 建议使用 currentColor 作为填充色，以便通过 CSS 控制颜色
• 图标默认大小为 1em，可通过 CSS 覆盖