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
This commit is contained in:
Bohdan Triapitsyn
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user