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/agents/AgentsSidebar.tsx

@@ -17,7 +17,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { RiAddLine, RiAiAgentFill, RiAiAgentLine, RiDeleteBinLine, RiFileCopyLine, RiMore2Line, RiRobot2Line, RiRobotLine, RiRestartLine, RiEditLine } from '@remixicon/react';
 import { useAgentsStore, isAgentBuiltIn, isAgentHidden, type AgentScope, type AgentDraft } from '@/stores/useAgentsStore';
 import { useShallow } from 'zustand/react/shallow';
 import { cn } from '@/lib/utils';
@@ -25,6 +24,7 @@ import type { Agent } from '@opencode-ai/sdk/v2';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import { SettingsProjectSelector } from '@/components/sections/shared/SettingsProjectSelector';
 import { SidebarGroup } from '@/components/sections/shared/SidebarGroup';
+import { Icon } from "@/components/icon/Icon";
 import { useI18n } from '@/lib/i18n';
 
 interface AgentsSidebarProps {
@@ -228,7 +228,6 @@ export const AgentsSidebar: React.FC<AgentsSidebarProps> = ({ onItemSelect }) =>
     });
     setSelectedAgent(newName);
 
-
   };
 
   const handleOpenRenameDialog = (agent: Agent) => {
@@ -293,11 +292,11 @@ export const AgentsSidebar: React.FC<AgentsSidebarProps> = ({ onItemSelect }) =>
   const getAgentModeIcon = (mode?: string) => {
     switch (mode) {
       case 'primary':
-        return <RiAiAgentLine className="h-3 w-3 text-primary" />;
+        return <Icon name="ai-agent" className="h-3 w-3 text-primary" />;
       case 'all':
-        return <RiAiAgentFill className="h-3 w-3 text-primary" />;
+        return <Icon name="ai-agent-fill" className="h-3 w-3 text-primary" />;
       case 'subagent':
-        return <RiRobotLine className="h-3 w-3 text-primary" />;
+        return <Icon name="robot" className="h-3 w-3 text-primary" />;
       default:
         return null;
     }
@@ -339,7 +338,7 @@ export const AgentsSidebar: React.FC<AgentsSidebarProps> = ({ onItemSelect }) =>
             className="h-7 w-7 px-0 -my-1 text-muted-foreground"
             onClick={handleCreateNew}
           >
-            <RiAddLine className="h-3.5 w-3.5" />
+            <Icon name="add" className="h-3.5 w-3.5" />
           </Button>
         </div>
       </div>
@@ -347,7 +346,7 @@ export const AgentsSidebar: React.FC<AgentsSidebarProps> = ({ onItemSelect }) =>
       <ScrollableOverlay outerClassName="flex-1 min-h-0" className="space-y-1 px-3 py-2 overflow-x-hidden">
         {visibleAgents.length === 0 ? (
           <div className="py-12 px-4 text-center text-muted-foreground">
-            <RiRobot2Line className="mx-auto mb-3 h-10 w-10 opacity-50" />
+            <Icon name="robot-2" className="mx-auto mb-3 h-10 w-10 opacity-50" />
             <p className="typography-ui-label font-medium">{t('settings.agents.sidebar.empty.title')}</p>
             <p className="typography-meta mt-1 opacity-75">{t('settings.agents.sidebar.empty.description')}</p>
           </div>
@@ -580,7 +579,7 @@ const AgentListItem: React.FC<AgentListItemProps> = ({
               variant="ghost"
               className="h-6 w-6 px-0 flex-shrink-0 -mr-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100"
             >
-              <RiMore2Line className="h-3.5 w-3.5" />
+              <Icon name="more-2" className="h-3.5 w-3.5" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-fit min-w-20">
@@ -591,7 +590,7 @@ const AgentListItem: React.FC<AgentListItemProps> = ({
                   onRename();
                 }}
               >
-                <RiEditLine className="h-4 w-4 mr-px" />
+                <Icon name="edit" className="h-4 w-4 mr-px" />
                 {t('settings.common.actions.rename')}
               </DropdownMenuItem>
             )}
@@ -602,7 +601,7 @@ const AgentListItem: React.FC<AgentListItemProps> = ({
                 onDuplicate();
               }}
             >
-              <RiFileCopyLine className="h-4 w-4 mr-px" />
+              <Icon name="file-copy" className="h-4 w-4 mr-px" />
               {t('settings.common.actions.duplicate')}
             </DropdownMenuItem>
 
@@ -613,7 +612,7 @@ const AgentListItem: React.FC<AgentListItemProps> = ({
                   onReset();
                 }}
               >
-                <RiRestartLine className="h-4 w-4 mr-px" />
+                <Icon name="restart" className="h-4 w-4 mr-px" />
                 {t('settings.common.actions.reset')}
               </DropdownMenuItem>
             )}
@@ -626,7 +625,7 @@ const AgentListItem: React.FC<AgentListItemProps> = ({
                 }}
                 className="text-destructive focus:text-destructive"
               >
-                <RiDeleteBinLine className="h-4 w-4 mr-px" />
+                <Icon name="delete-bin" className="h-4 w-4 mr-px" />
                 {t('settings.common.actions.delete')}
               </DropdownMenuItem>
             )}