flatten all icons to fix opacity summing up in overlapping points

Signed-off-by: Vu Van Dung <[email protected]>

package.json

@@ -53,7 +53,6 @@
     "eslint-config-next": "14.0.3",
     "graphql": "16.8.1",
     "graphql-request": "6.1.0",
-    "lucide-react": "0.294.0",
     "next": "14.0.4-canary.37",
     "next-auth": "5.0.0-beta.4",
     "next-axiom": "1.1.1",

src/app/(public)/(home)/github-stats.tsx

@@ -1,6 +1,7 @@
-import { Github } from "lucide-react";
 import { unstable_cache as cache } from "next/cache";
 
+import { GitHub } from "~/components/icons";
+
 import { MetadataCard } from "./metadata-card";
 import { octokit } from "./octokit";
 
@@ -104,7 +105,7 @@ export async function GitHubStats() {
         </div>
       }
       title="GitHub Stats"
-      icon={Github}
+      icon={GitHub}
       href="https://github.com/joulev"
     />
   );

src/app/(public)/(home)/metadata-card.tsx

@@ -1,5 +1,3 @@
-import type { LucideIcon } from "lucide-react";
-
 import { LinkButton } from "~/components/ui/button";
 
 export function MetadataCard({
@@ -12,7 +10,7 @@ export function MetadataCard({
   left: React.ReactNode;
   right: React.ReactNode;
   title: string;
-  icon: LucideIcon;
+  icon: (props: React.ComponentProps<"svg">) => JSX.Element;
   href: string;
 }) {
   return (

src/app/(public)/(home)/music-data.tsx

@@ -1,6 +1,6 @@
-import { PlayCircle } from "lucide-react";
 import YTMusic from "ytmusic-api";
 
+import { PlayCircle } from "~/components/icons";
 import { env } from "~/env.mjs";
 
 import { MetadataCard } from "./metadata-card";

src/app/(public)/(home)/page.tsx

@@ -1,8 +1,8 @@
-import { ChevronRight, Github, Mail } from "lucide-react";
 import { type Metadata } from "next";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
+import { ChevronRight, GitHub, Mail } from "~/components/icons";
 import { LinkButton } from "~/components/ui/button";
 import { Card } from "~/components/ui/card";
 import { Link } from "~/components/ui/link";
@@ -37,7 +37,7 @@ export default function Page() {
           </div>
           <div className="flex flex-row gap-3">
             <LinkButton href="https://github.com/joulev" target="_blank" rel="noreferrer noopener">
-              <Github /> GitHub
+              <GitHub /> GitHub
             </LinkButton>
             <LinkButton href="mailto:[email protected]" target="_blank" rel="noreferrer noopener">
               <Mail /> Email

src/app/(public)/apps/irasuto/navigate-button.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { ArrowDownUp, ChevronDown } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
 import { startTransition } from "react";
 
+import { ArrowDownUp, ChevronDown } from "~/components/icons";
 import { Button } from "~/components/ui/button";
 import {
   DropdownMenu,

src/app/(public)/apps/link/(public)/success/page.tsx

@@ -1,7 +1,7 @@
-import { Plus } from "lucide-react";
 import { redirect } from "next/navigation";
 
 import { CopyButton } from "~/components/copy-button";
+import { Plus } from "~/components/icons";
 import { LinkButton } from "~/components/ui/button";
 import { Link } from "~/components/ui/link";
 

src/app/(public)/glui/client-components.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { ChevronDown } from "lucide-react";
 import { useState } from "react";
 
+import { ChevronDown } from "~/components/icons";
 import { Button } from "~/components/ui/button";
 import {
   DropdownMenu,

src/app/(public)/glui/page.tsx

@@ -1,3 +1,5 @@
+import type { Metadata } from "next";
+
 import {
   Atom,
   ChevronDown,
@@ -6,8 +8,8 @@ import {
   CreditCard,
   FlaskConical,
   Gamepad2,
-  Github,
-  ListIcon,
+  GitHub,
+  List as ListIcon,
   LogOut,
   Mail,
   MessageSquare,
@@ -17,9 +19,7 @@ import {
   Swords,
   User,
   UserPlus,
-} from "lucide-react";
-import type { Metadata } from "next";
-
+} from "~/components/icons";
 import { Title } from "~/components/title";
 import { Button, LinkButton } from "~/components/ui/button";
 import { Card } from "~/components/ui/card";
@@ -566,7 +566,7 @@ export default function Page() {
           href="https://github.com/joulev/website/tree/main/src/components/ui"
           variants={{ variant: "primary" }}
         >
-          <Github />
+          <GitHub />
           See the components on GitHub
         </LinkButton>
       </section>

src/app/admin/manage/anime/[[...status]]/card.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useState } from "react";
+
 import {
   Move3d as Animation,
   User as Character,
@@ -14,9 +16,7 @@ import {
   AlignJustify as Story,
   Trash,
   X,
-} from "lucide-react";
-import { useState } from "react";
-
+} from "~/components/icons";
 import { Button } from "~/components/ui/button";
 import {
   Dialog,

src/app/admin/manage/anime/add-to-ptw/action-buttons.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { ExternalLink, Plus } from "lucide-react";
-
+import { ExternalLink, Plus } from "~/components/icons";
 import { Button, LinkButton } from "~/components/ui/button";
 import { addToPTW } from "~/lib/anime/actions";
 import { useTransitionWithNProgress } from "~/lib/hooks/use-transition-with-nprogress";

src/app/admin/manage/link/page.tsx

@@ -1,8 +1,8 @@
 import { eq } from "drizzle-orm";
-import { ExternalLink, Pen, Plus } from "lucide-react";
 import { unstable_cache as cache } from "next/cache";
 
 import { CopyButton } from "~/components/copy-button";
+import { ExternalLink, Pencil, Plus } from "~/components/icons";
 import { Title } from "~/components/title";
 import { Button, LinkButton } from "~/components/ui/button";
 import { Card } from "~/components/ui/card";
@@ -58,7 +58,7 @@ export default async function Page() {
                   />
                   <LinkUpdateModal link={link}>
                     <Button variants={{ size: "sm" }}>
-                      <Pen /> Edit
+                      <Pencil /> Edit
                     </Button>
                   </LinkUpdateModal>
                 </div>

src/app/admin/upload/success/page.tsx

@@ -1,7 +1,7 @@
-import { Plus } from "lucide-react";
 import { redirect } from "next/navigation";
 
 import { CopyButton } from "~/components/copy-button";
+import { Plus } from "~/components/icons";
 import { LinkButton } from "~/components/ui/button";
 import { Link } from "~/components/ui/link";
 

src/app/layout.tsx

@@ -1,11 +1,11 @@
 import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
-import { Github } from "lucide-react";
 import type { Metadata } from "next";
 import { AxiomWebVitals } from "next-axiom";
 import { Quattrocento_Sans as QuattrocentoSans } from "next/font/google";
 import localFont from "next/font/local";
 
+import { GitHub } from "~/components/icons";
 import { Link } from "~/components/ui/link";
 import { cn } from "~/lib/cn";
 
@@ -34,7 +34,7 @@ function VersionFooter() {
   return (
     <footer className="px-6 pb-12 text-center text-xs text-text-tertiary">
       <Link unstyled href={url} className="transition hover:text-text-secondary">
-        <Github className="inline h-3 w-3" /> joulev/website@
+        <GitHub className="inline h-3 w-3" /> joulev/website@
         <span className="font-mono">{label}</span>
       </Link>
     </footer>

src/app/p/[slug]/page.tsx

@@ -1,10 +1,10 @@
 import { eq } from "drizzle-orm";
-import { Code, Link, Plus } from "lucide-react";
 import type { Metadata } from "next";
 import { unstable_cache as cache } from "next/cache";
 import { notFound } from "next/navigation";
 
 import { CopyButton } from "~/components/copy-button";
+import { Code, Link, Plus } from "~/components/icons";
 import { LinkButton } from "~/components/ui/button";
 import { ScrollArea, ScrollBar } from "~/components/ui/scroll-area";
 import { db } from "~/lib/db";

src/components/anime/layout.tsx

@@ -9,8 +9,7 @@ import {
   RotateCcw,
   Tv2,
   XCircle,
-} from "lucide-react";
-
+} from "~/components/icons";
 import { Card } from "~/components/ui/card";
 import { getAllLists } from "~/lib/anime/get-lists";
 

src/components/anime/sidebar.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { Menu, X } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 
+import { Menu, X } from "~/components/icons";
 import { Title } from "~/components/title";
 import { Button } from "~/components/ui/button";
 import { Link } from "~/components/ui/link";

src/components/copy-button.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { Check, Copy } from "lucide-react";
 import { useState } from "react";
 
+import { Check, Copy } from "~/components/icons";
 import { Button } from "~/components/ui/button";
 
 export function CopyButton({