BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(ui): migrate icons to SVG sprite system

Browse Source 
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
This commit is contained in:
Bohdan Triapitsyn
2026-05-13 13:26:35 +03:00
parent b4cbd7f0d6
commit 14357257ae
173 changed files with 2342 additions and 2227 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/sections/mcp/McpPage.tsx
+18 -31
View File
@@ -20,20 +20,6 @@ import {
} from './mcpImport';
import { useMcpStore } from '@/stores/useMcpStore';
import { useDirectoryStore } from '@/stores/useDirectoryStore';
import {
RiAddLine,
RiArrowDownSLine,
RiArrowRightSLine,
RiClipboardLine,
RiDeleteBinLine,
RiEyeLine,
RiEyeOffLine,
RiExternalLinkLine,
RiFileCodeLine,
RiFolderLine,
RiPlugLine,
RiUser3Line,
} from '@remixicon/react';
import { cn } from '@/lib/utils';
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
import { MCP_OAUTH_CALLBACK_PATH, parseMcpOAuthCallbackContext, parseMcpOAuthCallbackStateKey } from '@/components/sections/mcp/mcpOAuth';
@@ -52,6 +38,7 @@ import {
SelectItem,
SelectTrigger,
} from '@/components/ui/select';
import { Icon } from "@/components/icon/Icon";
import { useI18n } from '@/lib/i18n';
// ─────────────────────────────────────────────────────────────
@@ -175,7 +162,7 @@ const CommandTextarea: React.FC<CommandTextareaProps> = ({
type="button"
title={pasteCommandTitle}
>
<RiClipboardLine className="h-3 w-3" />
<Icon name="clipboard" className="h-3 w-3" />
{pasteCommandLabel}
</Button>
</div>
@@ -354,7 +341,7 @@ const EnvEditor: React.FC<EnvEditorProps> = ({
type="button"
title={pasteTitle}
>
<RiClipboardLine className="h-3 w-3" />
<Icon name="clipboard" className="h-3 w-3" />
{pasteLabel}
</Button>
</div>
@@ -395,8 +382,8 @@ const EnvEditor: React.FC<EnvEditorProps> = ({
title={revealedKeys.has(idx) ? hideValueTitle : showValueTitle}
>
{revealedKeys.has(idx)
? <RiEyeOffLine className="h-3.5 w-3.5" />
: <RiEyeLine className="h-3.5 w-3.5" />}
? <Icon name="eye-off" className="h-3.5 w-3.5" />
: <Icon name="eye" className="h-3.5 w-3.5" />}
</button>
</div>
{/* Remove */}
@@ -406,7 +393,7 @@ const EnvEditor: React.FC<EnvEditorProps> = ({
onClick={() => removeRow(idx)}
aria-label={removeVariableAria}
>
<RiDeleteBinLine className="h-3.5 w-3.5" />
<Icon name="delete-bin" className="h-3.5 w-3.5" />
</Button>
</div>
))}
@@ -419,7 +406,7 @@ const EnvEditor: React.FC<EnvEditorProps> = ({
onClick={addRow}
type="button"
>
<RiAddLine className="h-3.5 w-3.5" />
<Icon name="add" className="h-3.5 w-3.5" />
{addVariable}
</Button>
@@ -1299,7 +1286,7 @@ export const McpPage: React.FC = () => {
return (
<div className="flex h-full items-center justify-center">
<div className="text-center text-muted-foreground">
<RiPlugLine className="mx-auto mb-3 h-12 w-12 opacity-50" />
<Icon name="plug" className="mx-auto mb-3 h-12 w-12 opacity-50" />
<p className="typography-body">{t('settings.mcp.page.empty.selectServer')}</p>
<p className="typography-meta mt-1 opacity-75">{t('settings.mcp.page.empty.addNewOne')}</p>
</div>
@@ -1447,11 +1434,11 @@ export const McpPage: React.FC = () => {
<div className="break-all typography-micro text-foreground font-mono">{authUrl}</div>
<div className="flex flex-wrap items-center gap-2">
<Button variant="outline" size="xs" className="!font-normal" onClick={() => void openExternalUrl(authUrl)}>
<RiExternalLinkLine className="h-3.5 w-3.5" />
<Icon name="external-link" className="h-3.5 w-3.5" />
{t('settings.mcp.page.actions.openInBrowser')}
</Button>
<Button variant="outline" size="xs" className="!font-normal" onClick={() => void handleCopyAuthUrl()}>
<RiClipboardLine className="h-3.5 w-3.5" />
<Icon name="clipboard" className="h-3.5 w-3.5" />
{t('settings.mcp.page.actions.copyLink')}
</Button>
</div>
@@ -1526,18 +1513,18 @@ export const McpPage: React.FC = () => {
/>
<Select value={draftScope} onValueChange={(value) => setDraftScope(value as McpScope)}>
<SelectTrigger className="!h-7 !w-7 !min-w-0 !px-0 !py-0 justify-center [&>svg:last-child]:hidden" title={draftScope === 'user' ? t('settings.common.scope.global') : t('settings.common.scope.project')}>
{draftScope === 'user' ? <RiUser3Line className="h-3.5 w-3.5" /> : <RiFolderLine className="h-3.5 w-3.5" />}
{draftScope === 'user' ? <Icon name="user-3" className="h-3.5 w-3.5" /> : <Icon name="folder" className="h-3.5 w-3.5" />}
</SelectTrigger>
<SelectContent align="end">
<SelectItem value="user">
<div className="flex items-center gap-2">
<RiUser3Line className="h-3.5 w-3.5" />
<Icon name="user-3" className="h-3.5 w-3.5" />
<span>{t('settings.common.scope.global')}</span>
</div>
</SelectItem>
<SelectItem value="project">
<div className="flex items-center gap-2">
<RiFolderLine className="h-3.5 w-3.5" />
<Icon name="folder" className="h-3.5 w-3.5" />
<span>{t('settings.common.scope.project')}</span>
</div>
</SelectItem>
@@ -1558,7 +1545,7 @@ export const McpPage: React.FC = () => {
type="button"
title={t('settings.mcp.page.server.importJsonTitle')}
>
<RiFileCodeLine className="h-3.5 w-3.5" />
<Icon name="file-code" className="h-3.5 w-3.5" />
{t('settings.mcp.page.server.importJson')}
</Button>
</div>
@@ -1663,9 +1650,9 @@ export const McpPage: React.FC = () => {
</span>
</div>
{isAdvancedRemoteOptionsOpen ? (
<RiArrowDownSLine className="h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors" />
<Icon name="arrow-down-s" className="h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors" />
) : (
<RiArrowRightSLine className="h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors" />
<Icon name="arrow-right-s" className="h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors" />
)}
</CollapsibleTrigger>
<CollapsibleContent className="pt-2">
@@ -1818,7 +1805,7 @@ export const McpPage: React.FC = () => {
className="!font-normal gap-1.5"
onClick={() => setEnvEntries([{ key: '', value: '' }])}
>
<RiAddLine className="h-3.5 w-3.5" />
<Icon name="add" className="h-3.5 w-3.5" />
{t('settings.mcp.page.env.addEnvironmentVariable')}
</Button>
) : (
@@ -1913,7 +1900,7 @@ export const McpPage: React.FC = () => {
onClick={handlePasteImportClipboard}
type="button"
>
<RiClipboardLine className="h-3.5 w-3.5" />
<Icon name="clipboard" className="h-3.5 w-3.5" />
{t('settings.mcp.page.importDialog.pasteFromClipboard')}
</Button>
</div>
packages/ui/src/components/sections/mcp/McpSidebar.tsx
+12 -12
View File
@@ -8,7 +8,6 @@ import {
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { RiAddLine, RiDeleteBinLine, RiMore2Line, RiPlugLine, RiRefreshLine, RiServerLine, RiGlobalLine } from '@remixicon/react';
import { useMcpConfigStore, type McpDraft, type McpServerConfig } from '@/stores/useMcpConfigStore';
import { useShallow } from 'zustand/react/shallow';
import { useMcpStore } from '@/stores/useMcpStore';
@@ -178,7 +177,7 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
aria-label={t('settings.mcp.sidebar.actions.refreshStatusAria')}
title={t('settings.mcp.sidebar.actions.refreshStatusTitle')}
>
<RiRefreshLine className={cn('h-4 w-4', isRefreshingStatus && 'animate-spin')} />
<Icon name="refresh" className={cn('h-4 w-4', isRefreshingStatus && 'animate-spin')} />
</button>
</div>
<SettingsProjectSelector className="mb-3" />
@@ -192,7 +191,7 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
onClick={handleCreateNew}
title={t('settings.mcp.sidebar.actions.addServerTitle')}
>
<RiAddLine className="h-3.5 w-3.5" />
<Icon name="add" className="h-3.5 w-3.5" />
</Button>
</div>
</div>
@@ -201,7 +200,7 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
<ScrollableOverlay outerClassName="flex-1 min-h-0" className="space-y-1 px-3 py-2 overflow-x-hidden">
{mcpServers.length === 0 ? (
<div className="py-12 px-4 text-center text-muted-foreground">
<RiPlugLine className="mx-auto mb-3 h-10 w-10 opacity-50" />
<Icon name="plug" className="mx-auto mb-3 h-10 w-10 opacity-50" />
<p className="typography-ui-label font-medium">{t('settings.mcp.sidebar.empty.title')}</p>
<p className="typography-meta mt-1 opacity-75">{t('settings.mcp.sidebar.empty.description')}</p>
</div>
@@ -246,9 +245,9 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
: t('settings.mcp.sidebar.serverType.remoteTitle')}
>
{server.type === 'local' ? (
<RiServerLine className="h-3 w-3 text-muted-foreground/60 flex-shrink-0" />
<Icon name="server" className="h-3 w-3 text-muted-foreground/60 flex-shrink-0" />
) : (
<RiGlobalLine className="h-3 w-3 text-muted-foreground/60 flex-shrink-0" />
<Icon name="global" className="h-3 w-3 text-muted-foreground/60 flex-shrink-0" />
)}
</span>
</div>
@@ -262,7 +261,7 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
<DropdownMenu open={openMenuMcp === server.name} onOpenChange={(open) => setOpenMenuMcp(open ? server.name : null)}>
<DropdownMenuTrigger asChild>
<Button size="xs" variant="ghost" className="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">
@@ -273,7 +272,7 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
}}
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>
</DropdownMenuContent>
@@ -323,9 +322,9 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
: t('settings.mcp.sidebar.serverType.remoteTitle')}
>
{server.type === 'local' ? (
<RiServerLine className="h-3 w-3 text-muted-foreground/60 flex-shrink-0" />
<Icon name="server" className="h-3 w-3 text-muted-foreground/60 flex-shrink-0" />
) : (
<RiGlobalLine className="h-3 w-3 text-muted-foreground/60 flex-shrink-0" />
<Icon name="global" className="h-3 w-3 text-muted-foreground/60 flex-shrink-0" />
)}
</span>
</div>
@@ -339,7 +338,7 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
<DropdownMenu open={openMenuMcp === server.name} onOpenChange={(open) => setOpenMenuMcp(open ? server.name : null)}>
<DropdownMenuTrigger asChild>
<Button size="xs" variant="ghost" className="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">
@@ -350,7 +349,7 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
}}
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>
</DropdownMenuContent>
@@ -398,3 +397,4 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
// Re-export for easy sidebar icon usage
export { McpIcon } from '@/components/icons/McpIcon';
import { Icon } from "@/components/icon/Icon";