feat: Changes icons to lucide icons#466
Conversation
|
@Samcode-16 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel. A member of the Team first needs to authorize it. |
github-actions
Bot
added
gssoc26
GSSoC Label Checklist 🏷️@Priyanshu-byte-coder — please apply the appropriate labels before merging: Difficulty (pick one):
Quality (optional):
Validation (required to score):
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Thanks for your first PR on DevTrack! 🎉
A maintainer will review it within 48 hours. While you wait:
- Make sure CI is passing (type-check + lint)
- Double-check the PR description is filled out and the issue is linked
- Feel free to ask questions in Discussions if you need help
If you find DevTrack useful, a ⭐ star on the repo is always appreciated — it helps the project grow and attract more contributors!
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR replaces emoji/SVG-based UI icons with Lucide React icons and adds a centralized icon mapping component.
Changes:
- Swapped various emoji/SVG icons for
lucide-reactcomponents across UI components. - Updated stat/milestone data structures to store icon components instead of emoji strings.
- Added a new
Icons.tsxhelper to map string names to Lucide icon components.
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/ThemeToggle.tsx | Replaces sun/moon emoji with Lucide icons for theme toggle. |
| src/components/StreakTracker.tsx | Replaces streak/milestone/copy/freeze icons with Lucide icons and updates rendering. |
| src/components/StreakAtRiskBanner.tsx | Replaces warning and close glyphs with Lucide icons. |
| src/components/StatsCard.tsx | Replaces inline SVG + emoji icons with Lucide icons; updates StatBox icon prop to component. |
| src/components/PinnedRepos.tsx | Replaces star/fork emoji with Lucide icons. |
| src/components/PersonalRecords.tsx | Replaces record emojis with Lucide icons. |
| src/components/Icons.tsx | Introduces a centralized string-to-icon mapping component and re-exports. |
| src/components/CopyLinkButton.tsx | Replaces link/check glyphs with Lucide icons. |
| src/components/CommitTimeChart.tsx | Updates chart data to store icon components instead of string names. |
| src/components/BackToTopButton.tsx | Replaces inline arrow SVG with Lucide ArrowUp. |
| package.json | Adds lucide-react dependency. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| interface IconProps { | ||
| name: string; | ||
| size?: number | string; | ||
| className?: string; | ||
| "aria-hidden"?: boolean; | ||
| } | ||
|
|
||
| const iconMap: Record<string, React.ComponentType<any>> = { | ||
| trophy: Trophy, | ||
| zap: Zap, | ||
| flame: Flame, | ||
| calendar: Calendar, | ||
| star: Star, | ||
| sun: Sun, | ||
| cloud: Cloud, | ||
| sunset: Sunset, | ||
| moon: Moon, | ||
| download: Download, | ||
| arrowUp: ArrowUp, | ||
| arrowDown: ArrowDown, | ||
| trendingUp: TrendingUp, | ||
| code: Code, | ||
| gitBranch: GitBranch, | ||
| gitCommit: GitCommit, | ||
| gitPullRequest: GitPullRequest, | ||
| clock: Clock, | ||
| alertTriangle: AlertTriangle, | ||
| checkCircle: CheckCircle, | ||
| settings: Settings, | ||
| logOut: LogOut, | ||
| menu: Menu, | ||
| close: X, | ||
| search: Search, | ||
| bell: Bell, | ||
| heart: Heart, | ||
| share: Share2, | ||
| chevronRight: ChevronRight, | ||
| chevronLeft: ChevronLeft, | ||
| chevronDown: ChevronDown, | ||
| chevronUp: ChevronUp, | ||
| moreHorizontal: MoreHorizontal, | ||
| loader: Loader, | ||
| }; | ||
|
|
||
| export function Icon({ name, size = 24, className = "", ...props }: IconProps) { | ||
| const IconComponent = iconMap[name]; | ||
|
|
||
| if (!IconComponent) { | ||
| console.warn(`Icon "${name}" not found in icon map`); | ||
| return null; | ||
| } | ||
|
|
||
| return <IconComponent size={size} className={className} {...props} />; | ||
| } |
| title={stat.tooltip} | ||
| > | ||
| <div className="text-xl mb-1" title={stat.tooltip} aria-label={stat.tooltip} role="img">{stat.icon}</div> | ||
| <div className="flex justify-center mb-1"> | ||
| <stat.icon size={24} className="text-[var(--accent)]" aria-hidden="true" /> | ||
| </div> |
| /** Individual stat box inside the card */ | ||
| function StatBox({ | ||
| icon, | ||
| icon: Icon, |
| small = false, | ||
| }: { | ||
| icon: string; | ||
| icon: React.ComponentType<any>; |
| > | ||
| <div style={{ fontSize: 28, lineHeight: 1 }}>{icon}</div> | ||
| <div style={{ lineHeight: 1 }}> | ||
| <Icon size={28} strokeWidth={1.5} className={accent ? "text-blue-300" : "text-slate-100"} /> |
Priyanshu-byte-coder
left a comment
Priyanshu-byte-coder
left a comment
There was a problem hiding this comment.
Three blocking issues:
-
lucide-reactversion doesn't exist.package.jsonspecifies"lucide-react": "^1.16.0"but lucide-react is still on0.x(e.g.0.475.0). Version1.16.0is not on npm —npm ciwill fail for every contributor. Fix: use the actual latest version (^0.475.0or runnpm install lucide-reactfresh and commit the correct lockfile). -
Hardcoded Tailwind colors — project convention is CSS vars only:
StatsCard.tsx:text-blue-300,text-slate-100→text-[var(--accent)],text-[var(--muted-foreground)]PinnedRepos.tsx:fill-yellow-400 text-yellow-400→ use CSS var equivalentCopyLinkButton.tsx:text-green-500→text-[var(--success)]
-
Icons.tsxis dead code — the file is added but none of the updated components use it. Remove it or wire it up.
Priyanshu-byte-coder
added
level:beginner
Priyanshu-byte-coder
left a comment
Priyanshu-byte-coder
left a comment
There was a problem hiding this comment.
Issues found in this PR:
-
Raw green color classes — replace
text-green-*/bg-green-*withtext-[var(--success)]or appropriate CSS var. -
Raw blue color classes — replace with appropriate CSS var (e.g.
text-[var(--accent)]).
|
Please check now @Priyanshu-byte-coder |
@Priyanshu-byte-coder here is the summary of the changes I made, please do review and consider merging the branch.
Summary
Replaces all emoji and inline SVG icons with Lucide React icons for a consistent, professional, and accessible UI
Closes #414
Type of Change
Changes Made
Installed lucide-react and implemented the lucide icons in the whole website by importing it from the library.
How to Test
Steps for the reviewer to verify this works:
1.Run npm install (lucide-react already in package.json)
2.Run npm run dev to start dev server
3.Verify dashboard loads without console errors
4.Check each section visually:
-Streak tracker stats show proper icons
-Theme toggle displays sun/moon
-Back-to-top button shows arrow icon
-Pinned repos show star/fork icons (GitHub-style)
5.Run npm run lint && npm run type-check — all pass
6.Test responsive layout on mobile
Screenshots (if UI change)
Checklist
npm run lintpasses locallynpm run type-check)