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

@@ -1,10 +1,4 @@
 import React from 'react';
-import {
-  RiArrowDownSLine,
-  RiCloseLine,
-  RiLoader4Line,
-  RiRefreshLine,
-} from '@remixicon/react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import {
@@ -13,6 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { Icon } from "@/components/icon/Icon";
 import type { GitRemote } from '@/lib/gitApi';
 import { useI18n } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
@@ -90,9 +85,9 @@ export const SyncActions: React.FC<SyncActionsProps> = ({
             aria-label={t('gitView.sync.syncChanges')}
           >
             {syncAction === 'sync' ? (
-              <RiLoader4Line className="size-4 animate-spin" />
+              <Icon name="loader-4" className="size-4 animate-spin" />
             ) : (
-              <RiRefreshLine className="size-4" />
+              <Icon name="refresh" className="size-4" />
             )}
             <span className="whitespace-nowrap tabular-nums">{primaryLabel}</span>
           </button>
@@ -111,7 +106,7 @@ export const SyncActions: React.FC<SyncActionsProps> = ({
             disabled={isDropdownDisabled}
             aria-label={t('gitView.sync.moreActionsAria')}
           >
-            <RiArrowDownSLine className="size-4" />
+            <Icon name="arrow-down-s" className="size-4" />
           </button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start" alignOffset={-40} className="w-[min(360px,calc(100vw-2rem))] max-h-[320px] overflow-y-auto">
@@ -128,7 +123,7 @@ export const SyncActions: React.FC<SyncActionsProps> = ({
               }}
             >
               <div className="flex w-full items-center gap-2">
-                <RiRefreshLine className="size-4 text-muted-foreground" />
+                <Icon name="refresh" className="size-4 text-muted-foreground" />
                 <div className="min-w-0 flex-1">
                   <div className="flex flex-col">
                     <span className="typography-ui-label text-foreground">
@@ -161,9 +156,9 @@ export const SyncActions: React.FC<SyncActionsProps> = ({
                     title={t('gitView.header.removeRemoteTitle', { name: remote.name })}
                   >
                     {removingRemoteName === remote.name ? (
-                      <RiLoader4Line className="size-3.5 animate-spin" />
+                      <Icon name="loader-4" className="size-3.5 animate-spin" />
                     ) : (
-                      <RiCloseLine className="size-3.5" />
+                      <Icon name="close" className="size-3.5" />
                     )}
                   </Button>
                 ) : null}