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

@@ -1,13 +1,6 @@
 import React from 'react';
-import {
-  RiGitMergeLine,
-  RiGitBranchLine,
-  RiLoader4Line,
-  RiCheckLine,
-  RiCloseLine,
-  RiSparklingLine,
-} from '@remixicon/react';
 import { Button } from '@/components/ui/button';
+import { Icon } from "@/components/icon/Icon";
 import type { GitMergeInProgress, GitRebaseInProgress } from '@/lib/api/types';
 import { useI18n } from '@/lib/i18n';
 
@@ -63,7 +56,7 @@ export const InProgressOperationBanner: React.FC<InProgressOperationBannerProps>
   const isProcessing = processingAction !== null;
 
   const operationLabel = operation === 'merge' ? t('gitView.operation.merge') : t('gitView.operation.rebase');
-  const OperationIcon = operation === 'merge' ? RiGitMergeLine : RiGitBranchLine;
+  const operationIconName = operation === 'merge' ? 'git-merge' : 'git-branch';
 
   // Build description
   let description = '';
@@ -81,7 +74,7 @@ export const InProgressOperationBanner: React.FC<InProgressOperationBannerProps>
     <div className="bg-[var(--status-warning-bg)] border border-[var(--status-warning)] rounded-lg p-3 mx-3 mt-3">
       <div className="flex flex-col gap-3">
         <div className="flex items-start gap-2 min-w-0">
-          <OperationIcon className="size-4 text-[var(--status-warning)] shrink-0" />
+          <Icon name={operationIconName} className="size-4 text-[var(--status-warning)] shrink-0" />
           <div className="min-w-0">
             <p className="typography-label text-[var(--status-warning)]">
               {t('gitView.operation.inProgressTitle', { operation: operationLabel })}
@@ -103,7 +96,7 @@ export const InProgressOperationBanner: React.FC<InProgressOperationBannerProps>
               disabled={isProcessing || isLoading}
               className="gap-1.5"
             >
-              <RiSparklingLine className="size-4" />
+              <Icon name="sparkling" className="size-4" />
               {t('gitView.operation.resolveWithAi')}
             </Button>
           )}
@@ -117,9 +110,9 @@ export const InProgressOperationBanner: React.FC<InProgressOperationBannerProps>
               className="gap-1.5"
             >
               {processingAction === 'abort' ? (
-                <RiLoader4Line className="size-4 animate-spin" />
+                <Icon name="loader-4" className="size-4 animate-spin" />
               ) : (
-                <RiCloseLine className="size-4" />
+                <Icon name="close" className="size-4" />
               )}
               {t('gitView.operation.abort')}
             </Button>
@@ -134,9 +127,9 @@ export const InProgressOperationBanner: React.FC<InProgressOperationBannerProps>
               className="gap-1.5"
             >
               {processingAction === 'continue' ? (
-                <RiLoader4Line className="size-4 animate-spin" />
+                <Icon name="loader-4" className="size-4 animate-spin" />
               ) : (
-                <RiCheckLine className="size-4" />
+                <Icon name="check" className="size-4" />
               )}
               {t('gitView.operation.continue')}
             </Button>