cameleer/design-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate all icons to Lucide React
All checks were successful
Build & Publish / publish (push) Successful in 1m2s
Details

Browse Source 
Replace unicode characters, emoji, and inline SVGs with lucide-react
components across the entire design system and page layer. Update
tests to assert on SVG elements instead of text content.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-27 23:25:43 +01:00
parent 2ffc268b44
commit 433d582da6
24 changed files with 128 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages/Inventory/sections/CompositesSection.tsx
View File

@@ -1,4 +1,5 @@
import { useState } from 'react'
import { Hexagon, ArrowRight, Diamond, Eye, Pencil, RotateCcw, Trash2, ChevronDown } from 'lucide-react'
import styles from './CompositesSection.module.css'
import {
Accordion,
@@ -157,25 +158,25 @@ const TREE_NODES = [
{
id: 'app1',
label: 'cameleer-prod',
icon: '⬡',
icon: <Hexagon size={14} />,
children: [
{
id: 'route1',
label: 'order-ingest',
icon: '→',
icon: <ArrowRight size={14} />,
children: [
{ id: 'proc1', label: 'ValidateOrder', icon: '◈', meta: '12ms' },
{ id: 'proc2', label: 'EnrichPayload', icon: '◈', meta: '8ms' },
{ id: 'proc3', label: 'RouteToQueue', icon: '◈', meta: '3ms' },
{ id: 'proc1', label: 'ValidateOrder', icon: <Diamond size={12} />, meta: '12ms' },
{ id: 'proc2', label: 'EnrichPayload', icon: <Diamond size={12} />, meta: '8ms' },
{ id: 'proc3', label: 'RouteToQueue', icon: <Diamond size={12} />, meta: '3ms' },
],
},
{
id: 'route2',
label: 'payment-validate',
icon: '→',
icon: <ArrowRight size={14} />,
children: [
{ id: 'proc4', label: 'TokenizeCard', icon: '◈', meta: '22ms' },
{ id: 'proc5', label: 'AuthorizePayment', icon: '◈', meta: '45ms' },
{ id: 'proc4', label: 'TokenizeCard', icon: <Diamond size={12} />, meta: '22ms' },
{ id: 'proc5', label: 'AuthorizePayment', icon: <Diamond size={12} />, meta: '45ms' },
],
},
],
@@ -505,13 +506,13 @@ export function CompositesSection() {
description="Click-triggered dropdown menu with icons, dividers, and disabled items."
>
<Dropdown
trigger={<Button size="sm" variant="secondary">Actions ▾</Button>}
trigger={<Button size="sm" variant="secondary">Actions <ChevronDown size={12} /></Button>}
items={[
{ label: 'View details', icon: '👁', onClick: () => undefined },
{ label: 'Edit route', icon: '✏', onClick: () => undefined },
{ label: 'View details', icon: <Eye size={14} />, onClick: () => undefined },
{ label: 'Edit route', icon: <Pencil size={14} />, onClick: () => undefined },
{ divider: true, label: '' },
{ label: 'Restart', icon: '↺', onClick: () => undefined },
{ label: 'Delete', icon: '✕', onClick: () => undefined, disabled: true },
{ label: 'Restart', icon: <RotateCcw size={14} />, onClick: () => undefined },
{ label: 'Delete', icon: <Trash2 size={14} />, onClick: () => undefined, disabled: true },
]}
/>
</DemoCard>

3
src/pages/Inventory/sections/PrimitivesSection.tsx
View File

@@ -1,4 +1,5 @@
import { useState } from 'react'
import { Search } from 'lucide-react'
import styles from './PrimitivesSection.module.css'
import {
Alert,
@@ -358,7 +359,7 @@ export function PrimitivesSection() {
description="Text input with optional leading icon and placeholder."
>
<Input placeholder="Plain input" />
<Input icon="🔍" placeholder="With icon" />
<Input icon={<Search size={14} />} placeholder="With icon" />
</DemoCard>
{/* 15b. InlineEdit */}