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/chat/message/parts/ProgressiveGroup.tsx
+2 -2
View File
@@ -1,5 +1,4 @@
import React from 'react';
import { RiStackLine } from '@remixicon/react';
import { cn } from '@/lib/utils';
import type { TurnActivityRecord as TurnActivityPart } from '../../lib/turns/types';
import type { ToolPart as ToolPartType } from '@opencode-ai/sdk/v2';
@@ -11,6 +10,7 @@ import { MinDurationShineText } from './MinDurationShineText';
import { ToolRevealOnMount } from './ToolRevealOnMount';
import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
import { Text } from '@/components/ui/text';
import { Icon } from "@/components/icon/Icon";
import { FadeInOnReveal } from '../FadeInOnReveal';
import { getToolIcon } from './toolPresentation';
import { getToolMetadata } from '@/lib/toolHelpers';
@@ -927,7 +927,7 @@ const ProgressiveGroup: React.FC<ProgressiveGroupProps> = ({
onClick={onToggle}
>
<span className="inline-flex h-5 items-center flex-shrink-0" style={{ color: 'var(--tools-icon)' }}>
<RiStackLine className="h-3.5 w-3.5" />
<Icon name="stack" className="h-3.5 w-3.5" />
</span>
<span
className="leading-5 font-semibold inline-flex h-5 items-center flex-shrink-0"
packages/ui/src/components/chat/message/parts/ReasoningPart.tsx
+8 -11
View File
@@ -1,10 +1,10 @@
import React from 'react';
import type { ComponentType } from 'react';
import type { Part } from '@opencode-ai/sdk/v2';
import { RiArrowDownSLine, RiArrowRightSLine, RiBrainAi3Line, RiChatAi3Line } from '@remixicon/react';
import { cn } from '@/lib/utils';
import type { ContentChangeReason } from '@/hooks/useChatAutoFollow';
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
import { Icon } from "@/components/icon/Icon";
import type { IconName } from "@/components/icon/icons";
import { useUIStore } from '@/stores/useUIStore';
import { useDurationTickerNow } from './useDurationTicker';
import { MarkdownRenderer } from '../../MarkdownRenderer';
@@ -14,15 +14,12 @@ type PartWithText = Part & { text?: string; content?: string; time?: { start?: n
export type ReasoningVariant = 'thinking' | 'justification';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type IconComponent = ComponentType<any>;
const variantConfig: Record<
ReasoningVariant,
{ label: string; Icon: IconComponent }
{ label: string; Icon: IconName }
> = {
thinking: { label: 'Thinking', Icon: RiBrainAi3Line },
justification: { label: 'Justification', Icon: RiChatAi3Line },
thinking: { label: 'Thinking', Icon: 'brain-ai-3' },
justification: { label: 'Justification', Icon: 'chat-ai-3' },
};
const cleanReasoningText = (text: string): string => {
@@ -99,7 +96,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
const [isExpanded, setIsExpanded] = React.useState(false);
const summary = React.useMemo(() => getReasoningSummary(text), [text]);
const { label, Icon } = variantConfig[variant];
const { label, Icon: iconName } = variantConfig[variant];
const timeStart = typeof time?.start === 'number' && Number.isFinite(time.start) ? time.start : undefined;
const timeEnd = typeof time?.end === 'number' && Number.isFinite(time.end) ? time.end : undefined;
@@ -131,7 +128,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
!isExpanded && (alwaysShowActions ? 'opacity-0' : 'group-hover/tool:opacity-0')
)}
>
<Icon className="h-3.5 w-3.5" />
<Icon name={iconName} className="h-3.5 w-3.5" />
</div>
<div
className={cn(
@@ -140,7 +137,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
!isExpanded && (alwaysShowActions ? 'opacity-100' : 'opacity-0 group-hover/tool:opacity-100')
)}
>
{isExpanded ? <RiArrowDownSLine className="h-3.5 w-3.5" /> : <RiArrowRightSLine className="h-3.5 w-3.5" />}
{isExpanded ? <Icon name="arrow-down-s" className="h-3.5 w-3.5" /> : <Icon name="arrow-right-s" className="h-3.5 w-3.5" />}
</div>
</div>
<span className="typography-meta font-medium">{label}</span>
packages/ui/src/components/chat/message/parts/ToolPart.tsx
+6 -9
View File
@@ -1,7 +1,6 @@
import React from 'react';
import { RuntimeAPIContext } from '@/contexts/runtimeAPIContext';
import { RiArrowDownSLine, RiArrowRightSLine, RiExternalLinkLine } from '@remixicon/react';
import { PatchDiff } from '@pierre/diffs/react';
import { cn } from '@/lib/utils';
import { SimpleMarkdownRenderer } from '../../MarkdownRenderer';
@@ -34,6 +33,7 @@ import {
tryParseJsonOutput,
} from '../toolRenderers';
import { JsonTreeViewer } from '@/components/ui/JsonTreeViewer';
import { Icon } from "@/components/icon/Icon";
import { DiffViewToggle, type DiffViewMode } from '../DiffViewToggle';
import { MinDurationShineText } from './MinDurationShineText';
import { ToolRevealOnMount } from './ToolRevealOnMount';
@@ -722,7 +722,7 @@ const ToolScrollableSection: React.FC<ToolScrollableSectionProps> = ({
disableHorizontal ? 'overflow-y-auto overflow-x-hidden' : 'overflow-auto',
className,
)}
size={24}
>
<div className="w-full min-w-0">
{children}
@@ -1190,7 +1190,7 @@ const TaskToolSummary: React.FC<{
onPointerDown={(event) => event.stopPropagation()}
onClick={handleOpenSession}
>
<RiExternalLinkLine className="h-3.5 w-3.5 flex-shrink-0" />
<Icon name="external-link" className="h-3.5 w-3.5 flex-shrink-0" />
<span className="typography-meta text-primary font-medium">{t('chat.toolPart.openSubtask', { type: agentType.charAt(0).toUpperCase() + agentType.slice(1) })}</span>
</button>
)}
@@ -1208,9 +1208,9 @@ const TaskToolSummary: React.FC<{
}}
>
{isOutputExpanded ? (
<RiArrowDownSLine className="h-3.5 w-3.5 flex-shrink-0" />
<Icon name="arrow-down-s" className="h-3.5 w-3.5 flex-shrink-0" />
) : (
<RiArrowRightSLine className="h-3.5 w-3.5 flex-shrink-0" />
<Icon name="arrow-right-s" className="h-3.5 w-3.5 flex-shrink-0" />
)}
<span className="typography-meta text-foreground/80 font-medium">{t('chat.toolPart.output')}</span>
</button>
@@ -1884,8 +1884,6 @@ const ToolPart: React.FC<ToolPartProps> = ({
sessionEvents.requestGitRefresh({ directory: currentDirectory });
}, [currentDirectory, isError, isFinalized, normalizedPartTool, part.id, status]);
const shouldNotifyStructuralChange = isFinalized || isTaskTool;
const onContentChangeRef = React.useRef(onContentChange);
@@ -2419,7 +2417,6 @@ const ToolPart: React.FC<ToolPartProps> = ({
taskSessionId,
]);
const taskSummaryLenRef = React.useRef<number>(taskSummaryEntries.length);
React.useEffect(() => {
if (!isTaskTool) {
@@ -2565,7 +2562,7 @@ const ToolPart: React.FC<ToolPartProps> = ({
!isExpanded && (alwaysShowActions ? 'opacity-100' : 'opacity-0 group-hover/tool:opacity-100')
)}
>
{isExpanded ? <RiArrowDownSLine className="h-3.5 w-3.5" /> : <RiArrowRightSLine className="h-3.5 w-3.5" />}
{isExpanded ? <Icon name="arrow-down-s" className="h-3.5 w-3.5" /> : <Icon name="arrow-right-s" className="h-3.5 w-3.5" />}
</div>
</div>
{isMultiFileApplyPatch ? (
packages/ui/src/components/chat/message/parts/UserTextPart.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import type { Part } from '@opencode-ai/sdk/v2';
import type { AgentMentionInfo } from '../types';
import { SimpleMarkdownRenderer } from '../../MarkdownRenderer';
import { useUIStore } from '@/stores/useUIStore';
import { RiArrowUpSLine } from '@remixicon/react';
import { Icon } from "@/components/icon/Icon";
type PartWithText = Part & { text?: string; content?: string; value?: string };
@@ -149,7 +149,7 @@ const UserTextPart: React.FC<UserTextPartProps> = ({ part, messageId, agentMenti
className="absolute top-0 right-0 z-10 flex items-center justify-center rounded-sm bg-[var(--surface-elevated)] p-0.5 text-[var(--surface-mutedForeground)] hover:text-[var(--surface-foreground)] hover:bg-[var(--interactive-hover)] transition-colors"
aria-label="Collapse"
>
<RiArrowUpSLine className="h-3.5 w-3.5" />
<Icon name="arrow-up-s" className="h-3.5 w-3.5" />
</button>
)}
<div
packages/ui/src/components/chat/message/parts/toolPresentation.tsx
+19 -37
View File
@@ -1,51 +1,33 @@
import React from 'react';
import {
RiAiAgentLine,
RiBookLine,
RiFileEditLine,
RiFileList2Line,
RiFileSearchLine,
RiFileTextLine,
RiFolder6Line,
RiGitBranchLine,
RiGlobalLine,
RiListCheck2,
RiListCheck3,
RiMenuSearchLine,
RiPencilLine,
RiSurveyLine,
RiTaskLine,
RiTerminalBoxLine,
RiToolsLine,
} from '@remixicon/react';
import { Icon } from "@/components/icon/Icon";
export const getToolIcon = (toolName: string) => {
const iconClass = 'h-3.5 w-3.5 flex-shrink-0';
const tool = toolName.toLowerCase();
if (tool === 'edit' || tool === 'multiedit' || tool === 'apply_patch' || tool === 'str_replace' || tool === 'str_replace_based_edit_tool') {
return <RiPencilLine className={iconClass} />;
return <Icon name="pencil" className={iconClass} />;
}
if (tool === 'write' || tool === 'create' || tool === 'file_write') {
return <RiFileEditLine className={iconClass} />;
return <Icon name="file-edit" className={iconClass} />;
}
if (tool === 'read' || tool === 'view' || tool === 'file_read' || tool === 'cat') {
return <RiFileTextLine className={iconClass} />;
return <Icon name="file-text" className={iconClass} />;
}
if (tool === 'bash' || tool === 'shell' || tool === 'cmd' || tool === 'terminal') {
return <RiTerminalBoxLine className={iconClass} />;
return <Icon name="terminal-box" className={iconClass} />;
}
if (tool === 'list' || tool === 'ls' || tool === 'dir' || tool === 'list_files') {
return <RiFolder6Line className={iconClass} />;
return <Icon name="folder-6" className={iconClass} />;
}
if (tool === 'search' || tool === 'grep' || tool === 'find' || tool === 'ripgrep') {
return <RiMenuSearchLine className={iconClass} />;
return <Icon name="menu-search" className={iconClass} />;
}
if (tool === 'glob') {
return <RiFileSearchLine className={iconClass} />;
return <Icon name="file-search" className={iconClass} />;
}
if (tool === 'fetch' || tool === 'curl' || tool === 'wget' || tool === 'webfetch') {
return <RiGlobalLine className={iconClass} />;
return <Icon name="global" className={iconClass} />;
}
if (
tool === 'web-search' ||
@@ -57,31 +39,31 @@ export const getToolIcon = (toolName: string) => {
tool === 'duckduckgo' ||
tool === 'perplexity'
) {
return <RiGlobalLine className={iconClass} />;
return <Icon name="global" className={iconClass} />;
}
if (tool === 'todowrite' || tool === 'todoread') {
return <RiListCheck3 className={iconClass} />;
return <Icon name="list-check-3" className={iconClass} />;
}
if (tool === 'structuredoutput' || tool === 'structured_output') {
return <RiListCheck2 className={iconClass} />;
return <Icon name="list-check-2" className={iconClass} />;
}
if (tool === 'skill') {
return <RiBookLine className={iconClass} />;
return <Icon name="book" className={iconClass} />;
}
if (tool === 'task') {
return <RiAiAgentLine className={iconClass} />;
return <Icon name="ai-agent" className={iconClass} />;
}
if (tool === 'question') {
return <RiSurveyLine className={iconClass} />;
return <Icon name="survey" className={iconClass} />;
}
if (tool === 'plan_enter') {
return <RiFileList2Line className={iconClass} />;
return <Icon name="file-list-2" className={iconClass} />;
}
if (tool === 'plan_exit') {
return <RiTaskLine className={iconClass} />;
return <Icon name="task" className={iconClass} />;
}
if (tool.startsWith('git')) {
return <RiGitBranchLine className={iconClass} />;
return <Icon name="git-branch" className={iconClass} />;
}
return <RiToolsLine className={iconClass} />;
return <Icon name="tools" className={iconClass} />;
};