wiki: Use react-icons

Change-Id: I44b9ab5ef50ed1b279ce5ac81e9734f6eaf29bc4

package.json

@@ -16,11 +16,11 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.15.0",
-    "lucide-react": "^0.468.0",
     "next": "15.1.1",
     "next-themes": "^0.4.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.4.0",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7"
   },

src/components/devices-page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Download, Github, Search, AlertTriangle } from "lucide-react";
+import { LuDownload, LuGithub, LuSearch } from "react-icons/lu";
+import { TbAlertTriangle } from "react-icons/tb";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import {
@@ -79,7 +80,7 @@ export default function DevicesPage() {
     <div className="container py-6 px-4 sm:px-6 lg:px-8 mx-auto">
       <div className="flex flex-col gap-6">
         <div className="relative flex items-center">
-          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <LuSearch className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
           <Input
             placeholder="Search devices..."
             className="pl-10 w-full"
@@ -158,7 +159,7 @@ function DeviceItem({ device }: { device: Device }) {
         <div className="flex items-center">
           <span className="font-medium">{device.name}</span>
           {device.deprecated && (
-            <AlertTriangle className="ml-2 h-4 w-4 text-yellow-600 dark:text-yellow-400" />
+            <TbAlertTriangle className="ml-2 h-4 w-4 text-yellow-600 dark:text-yellow-400" />
           )}
         </div>
         <span className="text-sm text-muted-foreground">{device.codename}</span>
@@ -177,7 +178,7 @@ function DeviceItem({ device }: { device: Device }) {
               rel="noopener noreferrer"
               className="text-primary hover:text-primary-focus"
             >
-              <Github className="h-4 w-4" />
+              <LuGithub className="h-4 w-4" />
             </a>
           )}
         </div>
@@ -206,15 +207,15 @@ function DeviceItem({ device }: { device: Device }) {
           size="sm"
           onClick={() => window.open(device.downloadUrl, "_blank")}
         >
-          <Download className="mr-2 h-4 w-4" />
+          <LuDownload className="mr-2 h-4 w-4" />
           Latest
         </Button>
         <Button
           variant="outline"
           size="sm"
           onClick={() => window.open(`${device.archiveUrl}`, "_blank")}
         >
-          <Download className="mr-2 h-4 w-4" />
+          <LuDownload className="mr-2 h-4 w-4" />
           Archive
         </Button>
 
@@ -223,7 +224,7 @@ function DeviceItem({ device }: { device: Device }) {
           size="sm"
           onClick={() => window.open(`${device.imgsUrl}`, "_blank")}
         >
-          <Download className="mr-2 h-4 w-4" />
+          <LuDownload className="mr-2 h-4 w-4" />
           Images
         </Button>
 

src/components/homepage.tsx

@@ -4,11 +4,11 @@ import Image from "next/image";
 import Link from "next/link";
 import { motion } from "framer-motion";
 import {
-  ArrowRight,
-  PaintbrushVertical,
-  CircleFadingArrowUp,
-  Smartphone,
-} from "lucide-react";
+  LuArrowRight,
+  LuPaintbrushVertical,
+  LuCircleFadingArrowUp,
+  LuSmartphone,
+} from "react-icons/lu";
 import { Button } from "@/components/ui/button";
 
 const MotionImage = motion.create(Image);
@@ -21,19 +21,19 @@ const fadeIn = {
 
 const features = [
   {
-    icon: PaintbrushVertical,
+    icon: LuPaintbrushVertical,
     title: "Customizable Features",
     description:
       "Add some extra functionality with a few thoughtful, carefully selected features that enhance usability and personalization without compromising system performance.",
   },
   {
-    icon: CircleFadingArrowUp,
+    icon: LuCircleFadingArrowUp,
     title: "Frequent Stable Updates",
     description:
       "These updates are carefully tested and designed to keep your system in a stable state while ensuring you always have the latest security patches and improvements.",
   },
   {
-    icon: Smartphone,
+    icon: LuSmartphone,
     title: "Stock Android Experience",
     description:
       "Enjoy a clean, bloat-free interface that stays true to the pure Android design and functionality.",
@@ -147,7 +147,7 @@ export default function Home() {
                 </p>
                 <Link href="https://github.com/WitAqua">
                   <Button>
-                    Click Here <ArrowRight className="ml-2 h-4 w-4" />
+                    Click Here <LuArrowRight className="ml-2 h-4 w-4" />
                   </Button>
                 </Link>
               </div>

src/components/site-footer.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Twitter } from "lucide-react";
+import { LuTwitter } from "react-icons/lu";
 
 export function SiteFooter() {
   return (
@@ -22,7 +22,7 @@ export function SiteFooter() {
 
         <div className="flex items-center space-x-4">
           <Link href="https://x.com/WitAquaROM" target="_blank" rel="noopener noreferrer">
-            <Twitter className="h-5 w-5" />
+            <LuTwitter className="h-5 w-5" />
             <span className="sr-only">X</span>
           </Link>
         </div>

src/components/site-header.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Github } from "lucide-react";
+import { LuGithub } from "react-icons/lu";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import { ThemeToggle } from "@/components/theme-toggle";
@@ -47,7 +47,7 @@ export function SiteHeader() {
               size="icon"
               className="hidden sm:inline-flex"
             >
-              <Github className="h-5 w-5" />
+              <LuGithub className="h-5 w-5" />
             </Button>
           </Link>
           <ThemeToggle />

src/components/team-member.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import { Github } from 'lucide-react'
+import { LuGithub } from 'react-icons/lu'
 import { Button } from '@/components/ui/button'
 
 interface TeamMemberProps {
@@ -24,7 +24,7 @@ export function TeamMember({ name, role, image, github }: TeamMemberProps) {
       <div className="flex space-x-2">
         <Button variant="outline" size="icon" asChild>
           <a href={`https://github.com/${github}`} target="_blank" rel="noopener noreferrer">
-            <Github className="h-4 w-4" />
+            <LuGithub className="h-4 w-4" />
             <span className="sr-only">GitHub profile</span>
           </a>
         </Button>

src/components/theme-toggle.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Moon, Sun } from 'lucide-react'
+import { LuMoon, LuSun } from 'react-icons/lu'
 import { useTheme } from "next-themes"
 
 import { Button } from "@/components/ui/button"
@@ -19,8 +19,8 @@ export function ThemeToggle() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <LuSun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <LuMoon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>

src/components/ui/accordion.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
+import { LuChevronDown } from "react-icons/lu"
 
 import { cn } from "@/lib/utils"
 
@@ -34,7 +34,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <LuChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))

src/components/ui/dialog.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import { LuX } from "react-icons/lu"
 
 import { cn } from "@/lib/utils"
 
@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+        <LuX className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

src/components/ui/dropdown-menu.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { LuCheck, LuChevronRight, LuCircle } from "react-icons/lu"
 
 import { cn } from "@/lib/utils"
 
@@ -34,7 +34,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto" />
+    <LuChevronRight className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -108,7 +108,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <LuCheck className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -131,7 +131,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+        <LuCircle className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}