Refactor Request
Problem
The app uses Unicode emoji characters (π β β
) as icons. Emoji rendering varies significantly across operating systems, browsers, and WebView versions, leading to inconsistent visual appearance.
Current Usage
- Review request indicators: π
- CI failure: β
- PR approved: β
- Various status indicators in notifications and activity feed
Proposed Solution
Migrate to lucide-react β a lightweight, tree-shakeable icon library with consistent SVG rendering:
Replacement mapping:
| Current |
Lucide equivalent |
| π |
<Eye /> |
| β |
<XCircle /> or <CircleX /> |
| β
|
<CheckCircle /> or <CircleCheck /> |
Benefits
- Consistent rendering across all platforms
- Customizable size, color, stroke width
- Tree-shakeable (only bundled icons are included)
- ~0.5KB per icon
Files to Modify
- Components using emoji icons (grep for emoji patterns)
src/components/Toast/Toast.tsx β notification icons
- Various card and status components
Refactor Request
Problem
The app uses Unicode emoji characters (π β β ) as icons. Emoji rendering varies significantly across operating systems, browsers, and WebView versions, leading to inconsistent visual appearance.
Current Usage
Proposed Solution
Migrate to
lucide-reactβ a lightweight, tree-shakeable icon library with consistent SVG rendering:Replacement mapping:
<Eye /><XCircle />or<CircleX /><CheckCircle />or<CircleCheck />Benefits
Files to Modify
src/components/Toast/Toast.tsxβ notification icons