style: convert all lucide icons to react icons

package.json

@@ -30,7 +30,6 @@
     "date-fns": "^4.1.0",
     "geist": "^1.3.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.525.0",
     "next": "^15.5.18",
     "next-themes": "^0.4.4",
     "postgres": "^3.4.4",
@@ -40,6 +39,7 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^6.1.0",
     "react-hook-form": "^7.55.0",
+    "react-icons": "^5.7.0",
     "server-only": "^0.0.1",
     "shadcn": "^4.2.0",
     "sonner": "^2.0.3",

src/app/(auth)/login/can-i-access.tsx

@@ -1,5 +1,5 @@
-import { Award, Building, Gem, Lock, ShieldUser, Star } from "lucide-react"
 import Image from "next/image"
+import { FiAward, FiBriefcase, FiHexagon, FiLock, FiShield, FiStar } from "react-icons/fi"
 import loginSvg1 from "@/assets/svg/login-1.svg"
 import loginSvg2 from "@/assets/svg/login-2.svg"
 import loginSvg3 from "@/assets/svg/login-3.svg"
@@ -10,16 +10,16 @@ export function CanIAccess() {
   return (
     <div className="text-foreground w-full">
       <div className="text-primary flex items-center space-x-2 py-2 dark:text-white">
-        <Lock size={28} className="" />
+        <FiLock size={28} className="" />
         <h3 className="text-xl font-bold">How can I access?</h3>
       </div>
       <p>You can access this dashboard if you have at least one of this role:</p>
       <div className="xs:grid-cols-2 grid grid-cols-1 flex-wrap gap-4 py-2 md:grid-cols-3 lg:flex">
-        <FeatureBox icon={Star} feature="President or Vice President" />
-        <FeatureBox icon={Award} feature="Board member" />
-        <FeatureBox icon={Building} feature="Department member" />
-        <FeatureBox icon={ShieldUser} feature="Groups admin" />
-        <FeatureBox icon={Gem} feature="Special roles" />
+        <FeatureBox icon={FiStar} feature="President or Vice President" />
+        <FeatureBox icon={FiAward} feature="Board member" />
+        <FeatureBox icon={FiBriefcase} feature="Department member" />
+        <FeatureBox icon={FiShield} feature="Groups admin" />
+        <FeatureBox icon={FiHexagon} feature="Special roles" />
       </div>
       <br />
       <p>When you have checked that you are eligible, these are the steps to access:</p>

src/app/(auth)/login/login-button.tsx

@@ -1,6 +1,6 @@
 "use client"
-import { LogInIcon } from "lucide-react"
 import Link from "next/link"
+import { FiLogIn } from "react-icons/fi"
 import { Card, CardContent } from "@/components/ui/card"
 
 export function LoginButton() {
@@ -9,7 +9,7 @@ export function LoginButton() {
       <Card className="border-primary from-primary to-primary/20 group relative h-full w-full cursor-pointer overflow-hidden bg-linear-to-r to-60%">
         <div className="bg-primary absolute inset-0 opacity-0 transition duration-250 group-hover:opacity-100"></div>
         <CardContent className="text-primary-foreground absolute inset-0 flex items-center space-x-4 py-4">
-          <LogInIcon size={32} />
+          <FiLogIn size={32} />
           <p className="flex-1 text-start text-xl">Enter your reserved area</p>
         </CardContent>
       </Card>

src/app/(auth)/login/login-form.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { Key, Loader2, Mail } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
+import { FiKey, FiLoader, FiMail } from "react-icons/fi"
 import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
 import { FieldSeparator } from "@/components/ui/field"
@@ -101,10 +101,10 @@ function EmailCard({
         </div>
         <Button type="submit" disabled={loading} className="basis-9 group">
           {loading ? (
-            <Loader2 size={16} className="animate-spin" />
+            <FiLoader size={16} className="animate-spin" />
           ) : (
             <>
-              <Mail size={16} />
+              <FiMail size={16} />
               Login with OTP
             </>
           )}
@@ -113,10 +113,10 @@ function EmailCard({
       <FieldSeparator>Or continue with</FieldSeparator>
       <Button onClick={passkeyLogin} disabled={passkeyLoading} className="basis-9 group" variant="secondary">
         {passkeyLoading ? (
-          <Loader2 size={16} className="animate-spin" />
+          <FiLoader size={16} className="animate-spin" />
         ) : (
           <>
-            <Key size={16} /> Login with Passkey
+            <FiKey size={16} /> Login with Passkey
           </>
         )}
       </Button>
@@ -189,7 +189,7 @@ function OTPCard({ email }: { email: string }) {
         </InputOTP>
       </div>
       <Button disabled={loading} className="self-stretch gap-2" onClick={verifyOtp}>
-        {loading ? <Loader2 size={16} className="animate-spin" /> : "Verify"}
+        {loading ? <FiLoader size={16} className="animate-spin" /> : "Verify"}
       </Button>
     </form>
   )

src/app/(auth)/login/what-is.tsx

@@ -1,23 +1,23 @@
+import type { IconType } from "react-icons"
 import {
-  BookOpen,
-  Bot,
-  CircleEllipsis,
-  ClipboardList,
-  Gavel,
-  HelpCircle,
-  LayoutTemplate,
-  type LucideIcon,
-  PencilLine,
-  ShieldCheck,
-  Users,
-} from "lucide-react"
+  FiBookOpen,
+  FiCheckSquare,
+  FiClipboard,
+  FiCpu,
+  FiEdit3,
+  FiHelpCircle,
+  FiLayout,
+  FiMoreHorizontal,
+  FiShield,
+  FiUsers,
+} from "react-icons/fi"
 import { Card } from "@/components/ui/card"
 
 export function WhatIs() {
   return (
     <div className="text-foreground w-full">
       <div className="text-primary flex items-center space-x-2 py-2 dark:text-white">
-        <HelpCircle size={28} className="" />
+        <FiHelpCircle size={28} className="" />
         <h3 className="text-xl font-bold">What is this?</h3>
       </div>
       <p>
@@ -26,15 +26,15 @@ export function WhatIs() {
       </p>
       <p>What actions you can perform depends on your role, but some remarkable ones are:</p>
       <div className="xs:grid-cols-2 grid grid-cols-1 flex-wrap gap-4 py-2 md:grid-cols-3 lg:flex">
-        <FeatureBox icon={BookOpen} feature="Group list" />
-        <FeatureBox icon={Users} feature="User list" />
-        <FeatureBox icon={PencilLine} feature="Update homepage" />
-        <FeatureBox icon={Gavel} feature="Ban user everywhere" />
-        <FeatureBox icon={ClipboardList} feature="Global audit log" />
-        <FeatureBox icon={Bot} feature="Manage Telegram bot" />
-        <FeatureBox icon={ShieldCheck} feature="Spam bypass message " />
-        <FeatureBox icon={LayoutTemplate} feature="Internal assoc tools" />
-        <FeatureBox icon={CircleEllipsis} feature="Many others" />
+        <FeatureBox icon={FiBookOpen} feature="Group list" />
+        <FeatureBox icon={FiUsers} feature="User list" />
+        <FeatureBox icon={FiEdit3} feature="Update homepage" />
+        <FeatureBox icon={FiCheckSquare} feature="Ban user everywhere" />
+        <FeatureBox icon={FiClipboard} feature="Global audit log" />
+        <FeatureBox icon={FiCpu} feature="Manage Telegram bot" />
+        <FeatureBox icon={FiShield} feature="Spam bypass message " />
+        <FeatureBox icon={FiLayout} feature="Internal assoc tools" />
+        <FeatureBox icon={FiMoreHorizontal} feature="Many others" />
       </div>
       <p className="text-muted-foreground text-xs italic">
         It&apos;s clear that you&apos;ll have access to different features depending on your role(s).
@@ -43,7 +43,7 @@ export function WhatIs() {
   )
 }
 
-export function FeatureBox({ icon: Icon, feature }: { icon: LucideIcon; feature: string }) {
+export function FeatureBox({ icon: Icon, feature }: { icon: IconType; feature: string }) {
   return (
     <Card className="h-36 w-full md:h-28 lg:w-36">
       <div className="grid h-full grid-cols-1 grid-rows-[1fr_1fr] gap-y-2">

src/app/(auth)/onboarding/link/telegram.tsx

@@ -1,8 +1,8 @@
 "use client"
 import { APIError } from "better-auth/api"
-import { CircleCheckBig, ClockAlertIcon } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useCallback, useEffect, useState } from "react"
+import { FiCheckCircle, FiClock } from "react-icons/fi"
 import { toast } from "sonner"
 import { Code } from "@/components/code"
 import { InputWithPrefix } from "@/components/input-prefix"
@@ -104,7 +104,7 @@ export function TelegramLink({ botUsername }: { botUsername: string }) {
   if (success)
     return (
       <div className="flex flex-col items-center gap-4 py-8">
-        <CircleCheckBig className="text-green-500 dark:text-green-700" size={64} />
+        <FiCheckCircle className="text-green-500 dark:text-green-700" size={64} />
         <p className="text-xl font-bold">Linked successfully!</p>
         <p className="text-muted-foreground">Redirecting you in 5s...</p>
       </div>
@@ -113,7 +113,7 @@ export function TelegramLink({ botUsername }: { botUsername: string }) {
   if (expired)
     return (
       <div className="flex flex-col items-center gap-4 py-8">
-        <ClockAlertIcon size={64} />
+        <FiClock size={64} />
         <p>Code Expired!</p>
         <Button onClick={handleSubmit}>Regenerate</Button>
       </div>

src/app/dashboard/(active)/account/delete-passkey.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { Trash2Icon } from "lucide-react"
 import { useRouter } from "next/navigation"
+import { FiTrash2 } from "react-icons/fi"
 import { toast } from "sonner"
 import {
   AlertDialog,
@@ -34,7 +34,7 @@ export function DeletePasskey({ id }: { id: string }) {
       <AlertDialogContent size="sm">
         <AlertDialogHeader>
           <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
-            <Trash2Icon />
+            <FiTrash2 />
           </AlertDialogMedia>
           <AlertDialogTitle>Remove passkey</AlertDialogTitle>
           <AlertDialogDescription>Are you sure you want to delete this passkey?</AlertDialogDescription>

src/app/dashboard/(active)/account/page.tsx

@@ -1,5 +1,5 @@
-import { Calendar, CircleAlert, KeyIcon } from "lucide-react"
 import { headers } from "next/headers"
+import { FiAlertCircle, FiCalendar, FiKey } from "react-icons/fi"
 import { auth } from "@/lib/auth"
 import { getServerSession } from "@/server/auth"
 import { DeletePasskey } from "./delete-passkey"
@@ -28,7 +28,7 @@ export default async function Account() {
 
         <div className="flex flex-col gap-2">
           <div className="flex items-center gap-2">
-            {!user.name && <CircleAlert className="text-yellow-500" />}
+            {!user.name && <FiAlertCircle className="text-yellow-500" />}
             <span className="text-accent-foreground/70">Name:</span>
             {user.name ? <p>{user.name}</p> : <SetName />}
           </div>
@@ -48,12 +48,12 @@ export default async function Account() {
         {passkeys?.map((p) => (
           <div className="grid grid-cols-[auto_1fr_auto] w-full gap-4 items-center" key={p.id}>
             <div className="bg-primary/30 h-full aspect-square flex justify-center items-center rounded-lg">
-              <KeyIcon size={16} />
+              <FiKey size={16} />
             </div>
             <div>
               <p>{p.name}</p>
               <p className="text-muted-foreground text-xs flex justify-start items-center gap-1">
-                <Calendar size={12} />
+                <FiCalendar size={12} />
                 Created on {p.createdAt.toLocaleDateString()}
               </p>
             </div>

src/app/dashboard/(active)/account/profile-pic.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 import type { User } from "better-auth"
-import { Pencil, Upload, UserIcon, X } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { forwardRef, useRef } from "react"
+import { FiEdit2, FiUpload, FiUser, FiX } from "react-icons/fi"
 import { toast } from "sonner"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
@@ -42,15 +42,15 @@ export function ProfilePic({ user }: Props) {
         <DropdownMenu>
           <DropdownMenuTrigger>
             <div className="absolute top-0 left-0 w-full h-full group-hover:opacity-100 opacity-0 bg-background/70 backdrop-blur-[1px] transition-all cursor-pointer z-10 grid place-content-center duration-100">
-              <Pencil size={32} />
+              <FiEdit2 size={32} />
             </div>
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem onClick={() => uploadRef.current?.click()}>
-              <Upload /> Upload
+              <FiUpload /> Upload
             </DropdownMenuItem>
             <DropdownMenuItem onClick={handleRemove} variant="destructive" disabled={!user.image}>
-              <X /> Remove
+              <FiX /> Remove
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -59,7 +59,7 @@ export function ProfilePic({ user }: Props) {
 
         <AvatarImage src={user.image || undefined} alt={`propic of ${user.name}`} />
         <AvatarFallback className="rounded-full text-3xl text-foreground">
-          {user.name ? getInitials(user.name) : <UserIcon size={48} />}
+          {user.name ? getInitials(user.name) : <FiUser size={48} />}
         </AvatarFallback>
       </Avatar>
       <p className="peer-hover:opacity-100 opacity-0 text-xs">Max 1MB</p>