ai-write/docs/ICON_SYSTEM.md

图标系统使用指南

概述

本项目使用 SVG 图标替代 emoji，提供更专业、统一的视觉体验。

使用方法

方式一：使用 IconLibrary 组件（推荐）

<script setup>
import IconLibrary from '@/components/icons/IconLibrary.vue'
</script>

<template>
  <!-- 基本使用 -->
  <IconLibrary name="edit" :size="20" />

  <!-- 不同尺寸 -->
  <IconLibrary name="save" :size="16" />
  <IconLibrary name="delete" :size="24" />

  <!-- 配合文本 -->
  <button class="btn">
    <IconLibrary name="save" :size="16" />
    <span>保存</span>
  </button>
</template>

方式二：直接使用 SVG

<template>
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
  </svg>
</template>

可用图标列表

写作相关

图标名称	说明	替代的 emoji
edit	编辑/写作	✏️
file-text	文档	📄
document	文件	📝
article	文章	📰
format-text	文本格式	📃

数据和素材

图标名称	说明	替代的 emoji
database	数据库	🗄️
folder	文件夹	📁
chart	图表	📊

设置和工具

图标名称	说明	替代的 emoji
settings	设置	⚙️
gear	齿轮	🔧

操作

图标名称	说明	替代的 emoji
save	保存	💾
copy	复制	📋
trash	删除	🗑️
delete	删除	❌
close	关闭	✕
check	确认	✅

导航

图标名称	说明	替代的 emoji
home	首页	🏠
menu	菜单	📋
sidebar	侧边栏	📂

搜索和筛选

图标名称	说明	替代的 emoji
search	搜索	🔍
filter	筛选	🔎

状态和通知

图标名称	说明	替代的 emoji
warning	警告	⚠️
error	错误	❌
info	信息	ℹ️
success	成功	✅

分析和比较

图标名称	说明	替代的 emoji
compare	对比	⚖️
analysis	分析	📈
sparkles	AI/魔法	✨

时间和历史

图标名称	说明	替代的 emoji
history	历史	🕐
clock	时间	⏰

添加和移除

图标名称	说明	替代的 emoji
add / plus	添加	➕
minus	减少	➖
expand	展开	⬇️
collapse	折叠	⬆️

其他

图标名称	说明	替代的 emoji
download	下载	📥
upload	上传	📤
refresh	刷新	🔄
loading	加载中	⏳
list	列表	📋

迁移示例

Before (使用 emoji)

<button class="btn">
  💾 保存
</button>

<div class="panel">
  ⚙️ 设置
</div>

After (使用 SVG 图标)

<button class="btn">
  <IconLibrary name="save" :size="16" />
  <span>保存</span>
</button>

<div class="panel">
  <IconLibrary name="settings" :size="20" />
  <span>设置</span>
</div>

样式建议

图标尺寸

/* 按钮内图标 */
.btn-icon { size: 16px; }

/* 标题图标 */
.title-icon { size: 20px; }

/* 大图标 */
.large-icon { size: 24px; }

图标间距

<!-- 图标与文字之间留有空隙 -->
<button class="btn">
  <IconLibrary name="save" :size="16" />
  <span class="ml-2">保存</span>
</button>

图标颜色

图标默认使用 currentColor，会继承父元素的 color 属性：

/* 主要操作图标 */
.btn-primary .icon {
  color: var(--accent-primary);
}

/* 危险操作图标 */
.btn-danger .icon {
  color: var(--accent-danger);
}

添加新图标

如果需要添加新图标，请按以下步骤：

1. 在 IconLibrary.vue 的 icons 对象中添加新图标
2. 提供 SVG path 数据
3. 更新此文档

'your-icon': {
  paths: ['M12 2L2 22h20L12 2z'], // 示例 path
  viewBox: '0 0 24 24'
}

注意事项

1. 一致性：在整个应用中使用相同的图标系统
2. 语义化：选择符合用户预期的图标
3. 尺寸：保持相近场景的图标尺寸一致
4. 对齐：使用 flex 布局确保图标与文本正确对齐
5. 可访问性：为图标提供 aria-label 或配合文字使用

<!-- 推荐：图标 + 文字 -->
<button>
  <IconLibrary name="save" :size="16" aria-hidden="true" />
  <span>保存</span>
</button>

<!-- 如需单独使用，添加 aria-label -->
<button aria-label="保存文档">
  <IconLibrary name="save" :size="20" />
</button>