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/commands/CommandsSidebar.tsx

@@ -17,13 +17,13 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { RiAddLine, RiTerminalBoxLine, RiMore2Line, RiDeleteBinLine, RiFileCopyLine, RiRestartLine, RiEditLine } from '@remixicon/react';
 import { useCommandsStore, isCommandBuiltIn, type Command } from '@/stores/useCommandsStore';
 import { useSkillsStore } from '@/stores/useSkillsStore';
 import { useShallow } from 'zustand/react/shallow';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import { cn } from '@/lib/utils';
 import { SettingsProjectSelector } from '@/components/sections/shared/SettingsProjectSelector';
+import { Icon } from "@/components/icon/Icon";
 import { useI18n } from '@/lib/i18n';
 
 interface CommandsSidebarProps {
@@ -97,7 +97,6 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
     setSelectedCommand(newName);
     onItemSelect?.();
 
-
   };
 
   const handleDeleteCommand = async (command: Command) => {
@@ -169,7 +168,6 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
     });
     setSelectedCommand(newName);
 
-
   };
 
   const handleOpenRenameDialog = (command: Command) => {
@@ -237,7 +235,7 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ 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>
@@ -245,7 +243,7 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
       <ScrollableOverlay outerClassName="flex-1 min-h-0" className="space-y-1 px-3 py-2">
         {commandOnlyItems.length === 0 ? (
           <div className="py-12 px-4 text-center text-muted-foreground">
-            <RiTerminalBoxLine className="mx-auto mb-3 h-10 w-10 opacity-50" />
+            <Icon name="terminal-box" className="mx-auto mb-3 h-10 w-10 opacity-50" />
             <p className="typography-ui-label font-medium">{t('settings.commands.sidebar.empty.title')}</p>
             <p className="typography-meta mt-1 opacity-75">{t('settings.commands.sidebar.empty.description')}</p>
           </div>
@@ -440,7 +438,7 @@ const CommandListItem: React.FC<CommandListItemProps> = ({
               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">
@@ -451,7 +449,7 @@ const CommandListItem: React.FC<CommandListItemProps> = ({
                   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>
             )}
@@ -462,7 +460,7 @@ const CommandListItem: React.FC<CommandListItemProps> = ({
                 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>
 
@@ -473,7 +471,7 @@ const CommandListItem: React.FC<CommandListItemProps> = ({
                   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>
             )}
@@ -486,7 +484,7 @@ const CommandListItem: React.FC<CommandListItemProps> = ({
                 }}
                 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>
             )}