fix: replace lucide GitHub icon with custom SVG icon#365
Conversation
|
@ombalgude is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe navbar component replaces the GitHub icon from Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/web/src/components/landing-sections/navbar.tsx (1)
3-11: keep imports grouped by source type.the new local
Githubimport is mixed into the third-party block, andPrimaryButtonis still using a relative path. while touching this block, please group third-party imports before local imports and prefer the@/alias.proposed import cleanup
import React, { useState } from "react"; -import PrimaryButton from "../ui/custom-button"; import { motion, useScroll, useMotionValueEvent } from "framer-motion"; import Image from "next/image"; -import { Terminal, Menu, X } from "lucide-react"; -import { Github } from "@/components/icons/icons"; import Link from "next/link"; import { usePathname } from "next/navigation"; +import { Terminal, Menu, X } from "lucide-react"; + +import { Github } from "@/components/icons/icons"; +import PrimaryButton from "@/components/ui/custom-button"; import { cn } from "@/lib/utils"; import { useAnalytics } from "@/hooks/useAnalytics";as per coding guidelines, “organize imports in order: react → third-party → local components → utils → types” and “use absolute imports from
@/prefix when available”.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/components/landing-sections/navbar.tsx` around lines 3 - 11, Reorder and normalize the import block in navbar.tsx so imports follow the project's convention (react → third-party → local components → utils → types): move third-party imports (framer-motion, next/image, lucide-react, next/link, next/navigation) together at the top, then local component imports (change PrimaryButton to use the "@/components/..." alias and place Github with other local icons like "@/components/icons/icons"), followed by utils/hooks (cn, useAnalytics). Ensure the unique symbols PrimaryButton and Github are imported from "@/..." and that useScroll/useMotionValueEvent, Image, Terminal/Menu/X, Link, usePathname, cn, and useAnalytics remain in their appropriate grouped sections.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/src/components/landing-sections/navbar.tsx`:
- Line 119: The Github icon svg is not constrained by its wrapper so it can
overflow; update the shared Github icon in
apps/web/src/components/icons/icons.tsx (the Github function) to accept
SVGProps<SVGSVGElement> (or at minimum forward a className) and apply
className="w-5 h-5" or width/height attributes to the svg itself, then update
usages in navbar.tsx (the <Github /> instances at the reported locations) to
pass the className (e.g. <Github className="w-5 h-5" aria-hidden="true" />) so
the SVG respects the 20px sizing (also apply same change to the other occurrence
noted).
---
Nitpick comments:
In `@apps/web/src/components/landing-sections/navbar.tsx`:
- Around line 3-11: Reorder and normalize the import block in navbar.tsx so
imports follow the project's convention (react → third-party → local components
→ utils → types): move third-party imports (framer-motion, next/image,
lucide-react, next/link, next/navigation) together at the top, then local
component imports (change PrimaryButton to use the "@/components/..." alias and
place Github with other local icons like "@/components/icons/icons"), followed
by utils/hooks (cn, useAnalytics). Ensure the unique symbols PrimaryButton and
Github are imported from "@/..." and that useScroll/useMotionValueEvent, Image,
Terminal/Menu/X, Link, usePathname, cn, and useAnalytics remain in their
appropriate grouped sections.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 7484905d-8e90-4121-98b3-62d21ae611ee
📒 Files selected for processing (1)
apps/web/src/components/landing-sections/navbar.tsx
| className="hidden min-[1115px]:flex items-center gap-2 px-4 py-2.5 bg-github-bg hover:bg-github-hover transition-colors rounded-lg border border-github-border text-white" | ||
| > | ||
| <Github className="w-5 h-5" /> | ||
| <div className="w-5 h-5"><Github /></div> |
There was a problem hiding this comment.
constrain the custom svg, not only its wrapper.
Github currently returns a bare svg from apps/web/src/components/icons/icons.tsx:195-197, so w-5 h-5 on the wrapper does not force the svg itself to 20px. this can overflow the contribute button in both desktop and mobile nav.
proposed local fix
- <div className="w-5 h-5"><Github /></div>
+ <span
+ aria-hidden="true"
+ className="w-5 h-5 [&>svg]:block [&>svg]:h-full [&>svg]:w-full"
+ >
+ <Github />
+ </span>- <div className="w-5 h-5"><Github /></div>
+ <span
+ aria-hidden="true"
+ className="w-5 h-5 [&>svg]:block [&>svg]:h-full [&>svg]:w-full"
+ >
+ <Github />
+ </span>longer term, consider making the shared icon accept SVGProps<SVGSVGElement> so callers can use <Github className="w-5 h-5" aria-hidden="true" />.
Also applies to: 160-160
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/src/components/landing-sections/navbar.tsx` at line 119, The Github
icon svg is not constrained by its wrapper so it can overflow; update the shared
Github icon in apps/web/src/components/icons/icons.tsx (the Github function) to
accept SVGProps<SVGSVGElement> (or at minimum forward a className) and apply
className="w-5 h-5" or width/height attributes to the svg itself, then update
usages in navbar.tsx (the <Github /> instances at the reported locations) to
pass the className (e.g. <Github className="w-5 h-5" aria-hidden="true" />) so
the SVG respects the 20px sizing (also apply same change to the other occurrence
noted).
1 participant
What does this PR do?
Replaces the
Githubicon fromlucide-reactwith a custom branded SVG in the Navbar.Changes
Githubicon import innavbar.tsxBefore
After
Type of change
Summary by CodeRabbit