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/BranchIntegrationSection.tsx

@@ -1,12 +1,4 @@
 import React from 'react';
-import {
-  RiGitMergeLine,
-  RiGitBranchLine,
-  RiLoader4Line,
-  RiArrowDownSLine,
-  RiCheckLine,
-  RiCloseLine,
-} from '@remixicon/react';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -31,6 +23,7 @@ import {
   CommandSeparator,
 } from '@/components/ui/command';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Icon } from "@/components/icon/Icon";
 import { cn } from '@/lib/utils';
 import { useI18n } from '@/lib/i18n';
 
@@ -188,13 +181,13 @@ export const BranchIntegrationSection: React.FC<BranchIntegrationSectionProps> =
             <div key={index} className="flex items-start gap-2">
               <div className="mt-0.5 shrink-0">
                 {log.status === 'running' && (
-                  <RiLoader4Line className="size-3.5 animate-spin text-primary" />
+                  <Icon name="loader-4" className="size-3.5 animate-spin text-primary" />
                 )}
                 {log.status === 'done' && (
-                  <RiCheckLine className="size-3.5 text-success" />
+                  <Icon name="check" className="size-3.5 text-success" />
                 )}
                 {log.status === 'error' && (
-                  <RiCloseLine className="size-3.5 text-destructive" />
+                  <Icon name="close" className="size-3.5 text-destructive" />
                 )}
                 {log.status === 'pending' && (
                   <div className="size-3.5 rounded-full border border-muted-foreground/30" />
@@ -251,7 +244,7 @@ export const BranchIntegrationSection: React.FC<BranchIntegrationSectionProps> =
             )}
           >
             <div className="flex items-center gap-2">
-              <RiGitMergeLine
+              <Icon name="git-merge"
                 className={cn('size-4', operation === 'merge' ? 'text-primary' : 'text-muted-foreground')}
               />
               <span
@@ -279,7 +272,7 @@ export const BranchIntegrationSection: React.FC<BranchIntegrationSectionProps> =
             )}
           >
             <div className="flex items-center gap-2">
-              <RiGitBranchLine
+              <Icon name="git-branch"
                 className={cn('size-4', operation === 'rebase' ? 'text-primary' : 'text-muted-foreground')}
               />
               <span
@@ -311,7 +304,7 @@ export const BranchIntegrationSection: React.FC<BranchIntegrationSectionProps> =
               <span className={cn('truncate', !selectedBranch && 'text-muted-foreground')}>
                 {selectedBranch || t('gitView.branch.selectBranch')}
               </span>
-              <RiArrowDownSLine className="size-4 opacity-60 shrink-0" />
+              <Icon name="arrow-down-s" className="size-4 opacity-60 shrink-0" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent
@@ -388,12 +381,12 @@ export const BranchIntegrationSection: React.FC<BranchIntegrationSectionProps> =
           >
             {operation === 'merge' ? (
               <>
-                <RiGitMergeLine className="size-4" />
+                <Icon name="git-merge" className="size-4" />
                 {t('gitView.operation.merge')}
               </>
             ) : (
               <>
-                <RiGitBranchLine className="size-4" />
+                <Icon name="git-branch" className="size-4" />
                 {t('gitView.operation.rebase')}
               </>
             )}
@@ -444,9 +437,9 @@ export const BranchIntegrationSection: React.FC<BranchIntegrationSectionProps> =
             disabled={isDisabled}
           >
             {isOperating ? (
-              <RiLoader4Line className="size-4 animate-spin" />
+              <Icon name="loader-4" className="size-4 animate-spin" />
             ) : (
-              <RiGitMergeLine className="size-4" />
+              <Icon name="git-merge" className="size-4" />
             )}
             <span>{t('gitView.branch.mergeRebase')}</span>
           </Button>