replace react-icons with Lucide icons

Author: LadyBluenotes

src/components/NotFound.tsx

@@ -1,5 +1,5 @@
 import { Link } from '@tanstack/react-router'
-import { TbGhost } from 'react-icons/tb'
+import { Ghost } from 'lucide-react'
 
 export function NotFound({ children }: { children?: any }) {
   return (
@@ -8,7 +8,7 @@ export function NotFound({ children }: { children?: any }) {
         <h1 className="text-3xl font-black uppercase [letter-spacing:-0.02em]">
           404 Not Found
         </h1>
-        <TbGhost className="text-[10rem] opacity-20 hover:opacity-100 animate-bounce mt-8 blur-md hover:blur-none transition-all duration-300" />
+        <Ghost className="text-[10rem] opacity-20 hover:opacity-100 animate-bounce mt-8 blur-md hover:blur-none transition-all duration-300" />
         <p>The page you are looking for does not exist.</p>
         {children || (
           <p className="flex items-center gap-2 flex-wrap">

src/components/Spinner.tsx

@@ -1,13 +1,13 @@
-import { TbFidgetSpinner } from 'react-icons/tb'
 import { twMerge } from 'tailwind-merge'
+import { Fan } from 'lucide-react'
 
 interface SpinnerProps {
   className?: string
 }
 
 export function Spinner({ className }: SpinnerProps) {
   return (
-    <TbFidgetSpinner
+    <Fan
       className={twMerge(
         'animate-spin text-gray-900 dark:text-white text-2xl',
         className,

src/components/icons/BaseballCapIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+
+export function BaseballCapIcon({
+                                  className,
+                                  width = '1em',
+                                  height = '1em',
+                                  ...props
+                                }: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 256 256"
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth={2}
+      width={width}
+      height={height}
+      role="img"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      {...props}
+    >
+      <path d="M128,20A108.12,108.12,0,0,0,20,128v56a27.86,27.86,0,0,0,15.26,24.93,28,28,0,0,0,29.28-2.34C76.2,198.11,96.68,188,128,188s51.8,10.1,63.46,18.58A28,28,0,0,0,236,184V128A108.12,108.12,0,0,0,128,20Zm84,108v1.87a170,170,0,0,0-33.29-14.3,170.81,170.81,0,0,0-23.45-67A84.14,84.14,0,0,1,212,128Zm-58.46-18.12a174.42,174.42,0,0,0-51.08,0A150,150,0,0,1,128,50.94,150.07,150.07,0,0,1,153.54,109.88Zm-52.8-61.31a170.81,170.81,0,0,0-23.45,67A170,170,0,0,0,44,129.87V128A84.14,84.14,0,0,1,100.74,48.57Zm109.11,139a4,4,0,0,1-4.28-.36C191,176.61,165.77,164,128,164s-63,12.61-77.57,23.18a4,4,0,0,1-4.28.36A3.76,3.76,0,0,1,44,184V158.14a148,148,0,0,1,168,0V184A3.76,3.76,0,0,1,209.85,187.54Z"></path>
+    </svg>
+  )
+}

src/libraries/ranger.tsx

@@ -1,4 +1,4 @@
-import { Book, RotateCw, Wallpaper } from 'lucide-react'
+import { Book, PlugZap, RotateCw, Wallpaper } from 'lucide-react'
 import { TbZoomQuestion } from 'react-icons/tb'
 import { RiLightbulbFlashLine } from 'react-icons/ri'
 import { twMerge } from 'tailwind-merge'
@@ -50,7 +50,7 @@ export const rangerProject = {
     {
       title: 'Typesafe & powerful, yet familiarly simple',
       icon: (
-        <RiLightbulbFlashLine
+        <PlugZap
           className={twMerge('scale-125 animate-pulse', textStyles)}
         />
       ),

src/libraries/router.tsx

@@ -1,6 +1,5 @@
-import { Book, DatabaseZap, Wallpaper } from 'lucide-react'
+import { Book, DatabaseZap, MessageCircleQuestionMark, PlugZap, Wallpaper } from 'lucide-react'
 import { RiLightbulbFlashLine } from 'react-icons/ri'
-import { TbZoomQuestion } from 'react-icons/tb'
 import { twMerge } from 'tailwind-merge'
 import { redirect } from '@tanstack/react-router'
 import { GithubIcon } from '~/components/icons/GithubIcon'
@@ -61,7 +60,7 @@ export const routerProject = {
     {
       title: 'Typesafe & powerful, yet familiarly simple',
       icon: (
-        <RiLightbulbFlashLine className={twMerge('scale-125', textStyles)} />
+        <PlugZap className={twMerge('scale-125', textStyles)} />
       ),
       description: (
         <div>
@@ -99,7 +98,7 @@ export const routerProject = {
     },
     {
       title: 'Search Param APIs to make your state-manager jealous',
-      icon: <TbZoomQuestion className={twMerge('', textStyles)} />,
+      icon: <MessageCircleQuestionMark className={twMerge('', textStyles)} />,
       description: (
         <div>
           Instead of throwing you to the URLSearchParam wolves, TanStack Router

src/libraries/start.tsx

@@ -1,6 +1,4 @@
-import { Book, Wallpaper } from 'lucide-react'
-import { PiRocketLaunchDuotone, PiTreeStructureBold } from 'react-icons/pi'
-import { TbServerBolt } from 'react-icons/tb'
+import { Book, Network, Rocket, ServerCrash, Wallpaper } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { redirect } from '@tanstack/react-router'
 import { GithubIcon } from '~/components/icons/GithubIcon'
@@ -59,7 +57,7 @@ export const startProject = {
     {
       title: 'Enterprise-Grade Routing',
       icon: (
-        <PiTreeStructureBold
+        <Network
           className={twMerge('motion-safe:animate-pulse', textStyles)}
           style={{
             animationDuration: '5s',
@@ -83,7 +81,7 @@ export const startProject = {
     {
       title: 'SSR, Streaming and Server RPCs',
       icon: (
-        <TbServerBolt
+        <ServerCrash
           className={twMerge('motion-safe:animate-ping', textStyles)}
           style={{
             animationDuration: '2s',
@@ -133,7 +131,7 @@ export const startProject = {
     {
       title: 'Deploy Anywhere',
       icon: (
-        <PiRocketLaunchDuotone
+        <Rocket
           className={twMerge('motion-safe:animate-bounce', textStyles)}
           style={{
             animationDuration: '2.5s',

src/routes/_libraries/dashboard.tsx

@@ -1,7 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useState, useEffect } from 'react'
-import { PiHandWavingLight } from 'react-icons/pi'
-import { ArrowRight } from 'lucide-react'
+import { ArrowRight, Hand } from 'lucide-react'
 
 export const Route = createFileRoute('/_libraries/dashboard')({
   component: Dashboard,
@@ -35,7 +34,7 @@ function Dashboard() {
                   animation: waved ? 'hand-wave 1s ease-in-out 1' : undefined,
                 }}
               >
-                <PiHandWavingLight className="w-24 h-24 text-yellow-500 rounded-full" />
+                <Hand className="w-24 h-24 text-yellow-500 rounded-full" />
               </div>
             </div>
             <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-1 text-center">

src/routes/merch.tsx

@@ -3,8 +3,8 @@ import { createFileRoute } from '@tanstack/react-router'
 import { Footer } from '~/components/Footer'
 import { seo } from '~/utils/seo'
 import { Shirt, ShoppingBag, Smartphone, Tag, Circle } from 'lucide-react'
-import { PiBaseballCapBold } from 'react-icons/pi'
 import { twMerge } from 'tailwind-merge'
+import { BaseballCapIcon } from '~/components/icons/BaseballCapIcon'
 
 export const Route = createFileRoute('/merch')({
   component: RouteComp,
@@ -24,7 +24,7 @@ const merchItems = [
       'T-shirts, sweatshirts, hoodies, onesies, hats, totes, and phone cases featuring TanStack designs',
     icons: [
       { Icon: Shirt, label: 'T-shirts' },
-      { Icon: PiBaseballCapBold, label: 'Hats' },
+      { Icon: BaseballCapIcon, label: 'Hats' },
       { Icon: ShoppingBag, label: 'Totes' },
       { Icon: Smartphone, label: 'Phone cases' },
     ],