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
@@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import { RiAddLine, RiArrowDownLine, RiArrowGoBackLine, RiArrowLeftLine, RiArrowRightLine, RiArrowUpLine, RiCloseLine, RiCommandLine, RiFullscreenExitLine, RiFullscreenLine, RiGlobalLine, RiTerminalLine } from '@remixicon/react';
|
||||
|
||||
import { useSessionUIStore } from '@/sync/session-ui-store';
|
||||
import { useTerminalStore } from '@/stores/useTerminalStore';
|
||||
@@ -14,6 +13,7 @@ import { cn } from '@/lib/utils';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { SortableTabsStrip } from '@/components/ui/sortable-tabs-strip';
|
||||
import { Icon } from "@/components/icon/Icon";
|
||||
import { useDeviceInfo } from '@/lib/device';
|
||||
import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
|
||||
import { primeTerminalInputTransport } from '@/lib/terminalApi';
|
||||
@@ -45,7 +45,6 @@ const MODIFIER_ARROW_SUFFIX: Record<Modifier, string> = {
|
||||
cmd: '3',
|
||||
};
|
||||
|
||||
|
||||
const STREAM_OPTIONS = {
|
||||
retry: {
|
||||
maxRetries: 3,
|
||||
@@ -142,8 +141,8 @@ export const TerminalView: React.FC = () => {
|
||||
const terminalTabItems = React.useMemo(() => {
|
||||
return (directoryTerminalState?.tabs ?? []).map((tab) => ({
|
||||
icon: (() => {
|
||||
const Icon = tab.iconKey ? PROJECT_ACTION_ICON_MAP[tab.iconKey as ProjectActionIconKey] ?? RiTerminalLine : RiTerminalLine;
|
||||
return <Icon className="h-4 w-4" />;
|
||||
const tabIconName = tab.iconKey ? PROJECT_ACTION_ICON_MAP[tab.iconKey as ProjectActionIconKey] ?? 'terminal' : 'terminal';
|
||||
return <Icon name={tabIconName} className="h-4 w-4" />;
|
||||
})(),
|
||||
id: tab.id,
|
||||
label: tab.label,
|
||||
@@ -649,7 +648,6 @@ export const TerminalView: React.FC = () => {
|
||||
[activeTabId, closeTab, disconnectStream, effectiveDirectory]
|
||||
);
|
||||
|
||||
|
||||
const handleViewportInput = React.useCallback(
|
||||
(data: string) => {
|
||||
if (!data || isReconnectPending) {
|
||||
@@ -958,7 +956,7 @@ export const TerminalView: React.FC = () => {
|
||||
onClick={() => handleMobileKeyPress('tab')}
|
||||
disabled={quickKeysDisabled}
|
||||
>
|
||||
<RiArrowRightLine size={16} />
|
||||
<Icon name="arrow-right" className="h-4 w-4" />
|
||||
<span className="sr-only">{t('terminalView.quickKeys.tabAria')}</span>
|
||||
</Button>
|
||||
<Button
|
||||
@@ -982,7 +980,7 @@ export const TerminalView: React.FC = () => {
|
||||
onClick={() => handleModifierToggle('cmd')}
|
||||
disabled={quickKeysDisabled}
|
||||
>
|
||||
<RiCommandLine size={16} />
|
||||
<Icon name="command"/>
|
||||
<span className="sr-only">{t('terminalView.quickKeys.commandModifierAria')}</span>
|
||||
</Button>
|
||||
<Button
|
||||
@@ -993,7 +991,7 @@ export const TerminalView: React.FC = () => {
|
||||
onClick={() => handleMobileKeyPress('arrow-up')}
|
||||
disabled={quickKeysDisabled}
|
||||
>
|
||||
<RiArrowUpLine size={16} />
|
||||
<Icon name="arrow-up"/>
|
||||
<span className="sr-only">{t('terminalView.quickKeys.arrowUpAria')}</span>
|
||||
</Button>
|
||||
<Button
|
||||
@@ -1004,7 +1002,7 @@ export const TerminalView: React.FC = () => {
|
||||
onClick={() => handleMobileKeyPress('arrow-left')}
|
||||
disabled={quickKeysDisabled}
|
||||
>
|
||||
<RiArrowLeftLine size={16} />
|
||||
<Icon name="arrow-left"/>
|
||||
<span className="sr-only">{t('terminalView.quickKeys.arrowLeftAria')}</span>
|
||||
</Button>
|
||||
<Button
|
||||
@@ -1015,7 +1013,7 @@ export const TerminalView: React.FC = () => {
|
||||
onClick={() => handleMobileKeyPress('arrow-down')}
|
||||
disabled={quickKeysDisabled}
|
||||
>
|
||||
<RiArrowDownLine size={16} />
|
||||
<Icon name="arrow-down"/>
|
||||
<span className="sr-only">{t('terminalView.quickKeys.arrowDownAria')}</span>
|
||||
</Button>
|
||||
<Button
|
||||
@@ -1026,7 +1024,7 @@ export const TerminalView: React.FC = () => {
|
||||
onClick={() => handleMobileKeyPress('arrow-right')}
|
||||
disabled={quickKeysDisabled}
|
||||
>
|
||||
<RiArrowRightLine size={16} />
|
||||
<Icon name="arrow-right"/>
|
||||
<span className="sr-only">{t('terminalView.quickKeys.arrowRightAria')}</span>
|
||||
</Button>
|
||||
<Button
|
||||
@@ -1037,7 +1035,7 @@ export const TerminalView: React.FC = () => {
|
||||
onClick={() => handleMobileKeyPress('enter')}
|
||||
disabled={quickKeysDisabled}
|
||||
>
|
||||
<RiArrowGoBackLine size={16} />
|
||||
<Icon name="arrow-go-back"/>
|
||||
<span className="sr-only">{t('terminalView.quickKeys.enterAria')}</span>
|
||||
</Button>
|
||||
</>
|
||||
@@ -1068,7 +1066,7 @@ export const TerminalView: React.FC = () => {
|
||||
onClick={handleCreateTab}
|
||||
title={t('terminalView.tabs.newTabTitle')}
|
||||
>
|
||||
<RiAddLine size={isTouchTerminal ? 18 : 16} />
|
||||
<Icon name="add" className={`${isTouchTerminal ? 'h-[18px] w-[18px]' : 'h-4 w-4'}`}/>
|
||||
</Button>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-1 overflow-visible">
|
||||
@@ -1084,7 +1082,7 @@ export const TerminalView: React.FC = () => {
|
||||
}}
|
||||
title={t('terminalView.preview.openTitle')}
|
||||
>
|
||||
<RiGlobalLine className="h-3.5 w-3.5 shrink-0" />
|
||||
<Icon name="global" className="h-3.5 w-3.5 shrink-0" />
|
||||
<span className="whitespace-nowrap">{t('terminalView.preview.open')}</span>
|
||||
</Button>
|
||||
) : null}
|
||||
@@ -1099,7 +1097,7 @@ export const TerminalView: React.FC = () => {
|
||||
title={isBottomTerminalExpanded ? t('terminalView.bottomDock.restoreTitle') : t('terminalView.bottomDock.expandTitle')}
|
||||
aria-label={isBottomTerminalExpanded ? t('terminalView.bottomDock.restoreAria') : t('terminalView.bottomDock.expandAria')}
|
||||
>
|
||||
{isBottomTerminalExpanded ? <RiFullscreenExitLine className="h-4 w-4" /> : <RiFullscreenLine className="h-4 w-4" />}
|
||||
{isBottomTerminalExpanded ? <Icon name="fullscreen-exit" className="h-4 w-4" /> : <Icon name="fullscreen" className="h-4 w-4" />}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
@@ -1110,7 +1108,7 @@ export const TerminalView: React.FC = () => {
|
||||
title={t('terminalView.bottomDock.closeTitle')}
|
||||
aria-label={t('terminalView.bottomDock.closeAria')}
|
||||
>
|
||||
<RiCloseLine className="h-4 w-4" />
|
||||
<Icon name="close" className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
Reference in New Issue
Block a user