perf(ui): migrate icons to SVG sprite system

Replace @remixicon/react with a shared Icon component that renders
via <use href> references to a single hidden SVG sprite. This reduces
DOM node count by replacing inline SVGs with lightweight references.

- Create Icon component with sprite injection (packages/ui/src/components/icon/)
- Migrate all 164 files from @remixicon/react to Icon component
- Auto-generate sprite data from remixicon bundle (scripts/generate-icon-sprite.mjs)
- Add bun run icons:generate to package.json
- Move @remixicon/react to devDependencies
- Add icon usage instructions to theme-system skill

packages/ui/src/components/sections/projects/ProjectsPage.tsx

@@ -7,9 +7,9 @@ import { cn } from '@/lib/utils';
 import { useProjectsStore } from '@/stores/useProjectsStore';
 import { useUIStore } from '@/stores/useUIStore';
 import { PROJECT_COLORS, PROJECT_ICONS, PROJECT_COLOR_MAP as COLOR_MAP, getProjectIconImageUrl } from '@/lib/projectMeta';
-import { RiCloseLine } from '@remixicon/react';
 import { WorktreeSectionContent } from '@/components/sections/openchamber/WorktreeSectionContent';
 import { ProjectActionsSection } from '@/components/sections/projects/ProjectActionsSection';
+import { Icon } from "@/components/icon/Icon";
 import { useThemeSystem } from '@/contexts/useThemeSystem';
 import { useI18n } from '@/lib/i18n';
 
@@ -298,7 +298,7 @@ export const ProjectsPage: React.FC = () => {
                   )}
                   title={t('settings.projects.page.field.none')}
                 >
-                  <RiCloseLine className="h-4 w-4 text-muted-foreground" />
+                  <Icon name="close" className="h-4 w-4 text-muted-foreground" />
                 </button>
                 {PROJECT_COLORS.map((c) => (
                   <button
@@ -346,10 +346,10 @@ export const ProjectsPage: React.FC = () => {
                   )}
                   title={t('settings.projects.page.field.none')}
                 >
-                  <RiCloseLine className="h-4 w-4 text-muted-foreground" />
+                  <Icon name="close" className="h-4 w-4 text-muted-foreground" />
                 </button>
                 {PROJECT_ICONS.map((i) => {
-                  const IconComponent = i.Icon;
+                  const iconName = i.Icon;
                   return (
                     <button
                       key={i.key}
@@ -363,7 +363,7 @@ export const ProjectsPage: React.FC = () => {
                       )}
                       title={i.label}
                     >
-                      <IconComponent className="w-4 h-4" style={currentColorVar && icon === i.key ? { color: currentColorVar } : undefined} />
+                      <Icon name={iconName} className="w-4 h-4" style={currentColorVar && icon === i.key ? { color: currentColorVar } : undefined} />
                     </button>
                   );
                 })}
@@ -412,7 +412,7 @@ export const ProjectsPage: React.FC = () => {
                     title={t('settings.projects.page.field.clearBackground')}
                     disabled={!iconBackground}
                   >
-                    <RiCloseLine className="h-3.5 w-3.5" />
+                    <Icon name="close" className="h-3.5 w-3.5" />
                   </Button>
                 </div>
               )}