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/views/git/GitHeader.tsx

@@ -1,17 +1,4 @@
 import React from 'react';
-import {
-  RiArrowDownSLine,
-  RiCheckLine,
-  RiLoader4Line,
-  RiGitBranchLine,
-  RiBriefcaseLine,
-  RiHomeLine,
-  RiGraduationCapLine,
-  RiCodeLine,
-  RiHeartLine,
-  RiHistoryLine,
-  RiUser3Line,
-} from '@remixicon/react';
 import { Button } from '@/components/ui/button';
 import { SortableTabsStrip, type SortableTabsStripItem } from '@/components/ui/sortable-tabs-strip';
 import {
@@ -21,6 +8,8 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Icon } from "@/components/icon/Icon";
+import type { IconName } from "@/components/icon/icons";
 import { BranchSelector } from './BranchSelector';
 import { WorktreeBranchDisplay } from './WorktreeBranchDisplay';
 import { SyncActions } from './SyncActions';
@@ -54,17 +43,14 @@ interface GitHeaderProps {
   onSelectActionTab?: (tabID: string) => void;
 }
 
-const IDENTITY_ICON_MAP: Record<
-  string,
-  React.ComponentType<React.ComponentProps<typeof RiGitBranchLine>>
-> = {
-  branch: RiGitBranchLine,
-  briefcase: RiBriefcaseLine,
-  house: RiHomeLine,
-  graduation: RiGraduationCapLine,
-  code: RiCodeLine,
-  heart: RiHeartLine,
-  user: RiUser3Line,
+const IDENTITY_ICON_MAP: Record<string, IconName> = {
+  branch: 'git-branch',
+  briefcase: 'briefcase',
+  house: 'home',
+  graduation: 'graduation-cap',
+  code: 'code',
+  heart: 'heart',
+  user: 'user-3',
 };
 
 const IDENTITY_COLOR_MAP: Record<string, string> = {
@@ -92,9 +78,10 @@ interface IdentityIconProps {
 }
 
 const IdentityIcon: React.FC<IdentityIconProps> = ({ icon, className, colorToken }) => {
-  const IconComponent = IDENTITY_ICON_MAP[icon ?? 'branch'] ?? RiUser3Line;
+  const iconName = IDENTITY_ICON_MAP[icon ?? 'branch'] ?? 'user-3';
   return (
-    <IconComponent
+    <Icon
+      name={iconName}
       className={className}
       style={{ color: getIdentityColor(colorToken) }}
     />
@@ -132,7 +119,7 @@ export const IdentityDropdown: React.FC<IdentityDropdownProps> = ({
               disabled={isDisabled}
             >
               {isApplying ? (
-                <RiLoader4Line className="size-4 animate-spin" />
+                <Icon name="loader-4" className="size-4 animate-spin" />
               ) : (
                 <IdentityIcon
                   icon={activeProfile?.icon}
@@ -145,7 +132,7 @@ export const IdentityDropdown: React.FC<IdentityDropdownProps> = ({
                   {activeProfile?.name || t('gitView.header.noIdentity')}
                 </span>
               )}
-              <RiArrowDownSLine className="size-4 opacity-60" />
+              <Icon name="arrow-down-s" className="size-4 opacity-60" />
             </Button>
           </DropdownMenuTrigger>
         </TooltipTrigger>
@@ -178,7 +165,7 @@ export const IdentityDropdown: React.FC<IdentityDropdownProps> = ({
                     </span>
                   </span>
                   {isSelected ? (
-                    <RiCheckLine className="ml-auto size-4 text-foreground" />
+                    <Icon name="check" className="ml-auto size-4 text-foreground" />
                   ) : null}
                 </span>
               </DropdownMenuItem>
@@ -230,7 +217,7 @@ export const GitHeader: React.FC<GitHeaderProps> = ({
               className="h-8 w-8 px-0"
               onClick={onOpenHistory}
             >
-              <RiHistoryLine className="size-4" />
+              <Icon name="history" className="size-4" />
             </Button>
           </TooltipTrigger>
           <TooltipContent sideOffset={8}>{t('gitView.history.title')}</TooltipContent>