diff --git a/gitnexus-web/src/lib/lucide-icons.tsx b/gitnexus-web/src/lib/lucide-icons.tsx index 242f8e94b..05676e50d 100644 --- a/gitnexus-web/src/lib/lucide-icons.tsx +++ b/gitnexus-web/src/lib/lucide-icons.tsx @@ -6,10 +6,37 @@ * which icons are used and allows future optimization (e.g., tree-shaking * configuration, icon subset bundling) without touching every component. * - * Note on `Github`: brand icons were removed in lucide-react v1 - * (https://lucide.dev/guide/react/migration). We provide a local - * SVG component below that mirrors the lucide v0 mark and the lucide - * component API, so consumers can keep importing it from this module. + * --- Why a local `Github` icon? --- + * + * Lucide removed all brand icons in v1 + * (https://lucide.dev/guide/react/migration, + * https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md), + * so `import { Github } from 'lucide-react'` no longer compiles. + * + * We replace it with the official mark from Primer Octicons — the icon set + * GitHub itself uses on github.com — copied verbatim. This was preferred over + * the alternatives because it: + * + * 1. Is the canonical GitHub-maintained source for the mark, kept in sync + * with what users see on github.com. + * 2. Is MIT-licensed (Copyright (c) GitHub Inc., + * https://github.com/primer/octicons/blob/main/LICENSE), so embedding the + * path data is permitted. + * 3. Adds zero new npm dependencies (vs. `@primer/octicons-react`, + * `react-icons`, or `simple-icons`), keeping the web bundle lean. + * 4. Ships per-size hand-tuned glyphs (16 + 24) — the same approach Primer + * uses — so the mark stays crisp at the small `h-4 w-4` sites in the + * header and onboarding screens as well as at full size. + * + * Trademark note: the GitHub mark is a registered trademark of GitHub, Inc. + * (https://brand.github.com/foundations/logo). The MIT license covers our + * right to copy the SVG; trademark rules still govern *use*. We use the mark + * here only to link to GitHub and to indicate GitHub source-repo integration, + * which are explicitly permitted by GitHub's brand toolkit. + * + * SVG sources (copied verbatim, MIT, Copyright (c) GitHub Inc.): + * - https://github.com/primer/octicons/blob/main/icons/mark-github-16.svg + * - https://github.com/primer/octicons/blob/main/icons/mark-github-24.svg */ import { forwardRef } from 'react'; import type { LucideProps } from 'lucide-react'; @@ -83,13 +110,50 @@ export { ZoomOut, } from 'lucide-react'; +/** + * GitHub mark — local copy of Primer Octicons `mark-github-{16,24}`. + * + * Why this exists, why Primer Octicons, and the trademark caveat are documented + * at the top of this file. Please read that header before changing the SVG + * paths or swapping the source. + * + * API-compatible with `lucide-react` icons (`LucideProps`). The Octicons mark + * is a *filled* glyph, so the lucide-only stroke props (`strokeWidth`, + * `absoluteStrokeWidth`) are accepted for type parity but ignored. Color + * defaults to `currentColor`, so Tailwind `text-*` utilities work the same as + * with any other icon in this module. + */ export const Github = forwardRef(function Github( - { size = 24, color = 'currentColor', strokeWidth = 2, absoluteStrokeWidth, className, ...rest }, + { + size = 24, + color = 'currentColor', + className, + strokeWidth: _strokeWidth, + absoluteStrokeWidth: _absoluteStrokeWidth, + ...rest + }, ref, ) { - const resolvedStrokeWidth = absoluteStrokeWidth - ? (Number(strokeWidth) * 24) / Number(size) - : strokeWidth; + const numericSize = typeof size === 'string' ? Number.parseFloat(size) : size; + const useSmallVariant = Number.isFinite(numericSize) && (numericSize as number) <= 16; + + if (useSmallVariant) { + return ( + + + + ); + } + return ( (function Github( width={size} height={size} viewBox="0 0 24 24" - fill="none" - stroke={color} - strokeWidth={resolvedStrokeWidth} - strokeLinecap="round" - strokeLinejoin="round" + fill={color} className={className} {...rest} > - - + ); });