Skip to content

fix: replace lucide GitHub icon with custom SVG icon #365

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ombalgude wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: replace lucide GitHub icon with custom SVG icon #365

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions apps/web/src/components/landing-sections/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ 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, Github, Menu, X } from "lucide-react";
import { Terminal, Menu, X } from "lucide-react";
import { Github } from "@/components/icons/icons";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
Expand Down Expand Up @@ -115,7 +116,7 @@ const Navbar = () => {
onClick={() => handleContributeClick("navbar")}
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>

@coderabbitai coderabbitai Bot Apr 22, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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).

<span className="text-sm font-medium">Contribute</span>
</Link>
<Link
Expand Down Expand Up @@ -156,7 +157,7 @@ const Navbar = () => {
}}
className="flex items-center gap-2 px-4 py-2 bg-github-bg hover:bg-github-hover rounded-lg border border-github-border text-white transition-colors"
>
<Github className="w-5 h-5" />
<div className="w-5 h-5"><Github /></div>
<span className="text-sm font-medium">Contribute</span>
</Link>
</motion.div>
Expand Down