LabelingSystem/web/apps/lq_label/ICON_FIX.md

图标导入错误修复

问题描述

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
Check the render method of `HomeView`.

问题原因

在优化 HomeView 和 Sidebar 时，使用了不存在的图标：

• IconClipboardList - 不存在
• IconTag - 不存在

解决方案

查看 web/libs/ui/src/assets/icons/index.ts 找到正确的图标名称：

修复前

import { IconFolder, IconClipboardList, IconTag } from '@humansignal/ui';

修复后

import { IconFolder, IconClipboardCheck, IconAnnotation } from '@humansignal/ui';

图标映射

用途	错误的图标	正确的图标
任务管理	IconClipboardList	IconClipboardCheck
我的标注	IconTag	IconAnnotation
项目管理	IconFolder	IconFolder ✅

修改的文件

1. web/apps/lq_label/src/views/home-view.tsx

   • 更新导入语句
   • 更新 features 数组中的图标

2. web/apps/lq_label/src/components/layout/sidebar.tsx

   • 更新导入语句
   • 更新 menuItems 数组中的图标

如何查找可用图标

1. 查看图标索引文件：

   web/libs/ui/src/assets/icons/index.ts
   

2. 搜索相关关键词：

   # 搜索包含 "clipboard" 的图标
   grep -i "clipboard" web/libs/ui/src/assets/icons/index.ts
      
   # 搜索包含 "annotation" 的图标
   grep -i "annotation" web/libs/ui/src/assets/icons/index.ts
   

3. 常用图标列表：

   • IconFolder - 文件夹
   • IconClipboardCheck - 剪贴板/任务
   • IconAnnotation - 标注
   • IconHome - 首页
   • IconMenu - 菜单
   • IconX / IconClose - 关闭
   • IconCheck - 勾选
   • IconTrash - 删除
   • IconEdit / IconPencil - 编辑
   • IconPlus - 添加
   • IconSearch - 搜索
   • IconSettings / IconGear - 设置

验证方法

1. 检查编译错误：

   yarn nx serve lq_label
   

2. 检查浏览器控制台是否有错误

3. 确认图标正确显示在页面上

总结

修复后，所有图标都能正确导入和显示：

• ✅ HomeView 的 Features 卡片图标
• ✅ Sidebar 的菜单项图标
• ✅ 移动端菜单按钮图标
• ✅ NotFoundView 的首页图标

记住：在使用 @humansignal/ui 的图标前，先检查 icons/index.ts 确认图标是否存在！