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/MessageHeader.tsx
+7 -8
View File
@@ -1,8 +1,8 @@
import React from 'react';
import { RiAiAgentLine, RiBrainAi3Line, RiUser3Line } from '@remixicon/react';
import { cn } from '@/lib/utils';
import { getAgentColor } from '@/lib/agentColors';
import { useProviderLogo } from '@/hooks/useProviderLogo';
import { Icon } from "@/components/icon/Icon";
interface MessageHeaderProps {
isUser: boolean;
@@ -23,7 +23,7 @@ const MessageHeader: React.FC<MessageHeaderProps> = ({ isUser, providerID, agent
<div className="flex-shrink-0">
{isUser ? (
<div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center">
<RiUser3Line className="h-4 w-4 text-primary" />
<Icon name="user-3" className="h-4 w-4 text-primary" />
</div>
) : (
<div className="flex items-center justify-center">
@@ -38,10 +38,9 @@ const MessageHeader: React.FC<MessageHeaderProps> = ({ isUser, providerID, agent
onError={handleLogoError}
/>
) : (
<RiBrainAi3Line
className="h-4 w-4"
style={{ color: `var(${getAgentColor(agentName).var})` }}
/>
<Icon name="brain-ai-3" className="h-4 w-4"
style={{ color: `var(${getAgentColor(agentName).var})` }}/>
)}
</div>
)}
@@ -64,7 +63,7 @@ const MessageHeader: React.FC<MessageHeaderProps> = ({ isUser, providerID, agent
getAgentColor(agentName).class
)}
>
<RiAiAgentLine className="h-3 w-3 flex-shrink-0" />
<Icon name="ai-agent" className="h-3 w-3 flex-shrink-0" />
<span className="font-medium">{agentName}</span>
</div>
)}
@@ -85,7 +84,7 @@ const MessageHeader: React.FC<MessageHeaderProps> = ({ isUser, providerID, agent
: undefined
}
>
<RiBrainAi3Line className="h-3 w-3 flex-shrink-0" />
<Icon name="brain-ai-3" className="h-3 w-3 flex-shrink-0" />
<span className="font-medium">{variant.length > 0 ? variant[0].toLowerCase() + variant.slice(1) : variant}</span>
</div>
)}