replace icons with Lucide icons for consistency across multiple components

Author: LadyBluenotes

src/libraries/table.tsx

@@ -1,6 +1,5 @@
 import { handleRedirects } from '~/utils/handleRedirects.server'
-import { Book, Wallpaper, Zap } from 'lucide-react'
-import { IoIosBody } from 'react-icons/io'
+import { Book, PersonStanding, Wallpaper, Zap } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { CogsIcon } from '~/components/icons/CogsIcon'
@@ -73,7 +72,7 @@ export const tableProject = {
       title: 'Designed for zero design',
       icon: (
         <div className="text-center overflow-hidden">
-          <IoIosBody className={twMerge(textStyles)} />
+          <PersonStanding className={twMerge(textStyles)} />
         </div>
       ),
       description: (

src/libraries/virtual.tsx

@@ -1,5 +1,4 @@
-import { Book, Wallpaper, Zap } from 'lucide-react'
-import { IoIosBody } from 'react-icons/io'
+import { Book, PersonStanding, Wallpaper, Zap } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { CogsIcon } from '~/components/icons/CogsIcon'
@@ -53,7 +52,7 @@ export const virtualProject = {
       title: 'Designed for zero design',
       icon: (
         <div className="text-center overflow-hidden">
-          <IoIosBody className="text-purple-400" />
+          <PersonStanding className="text-purple-400" />
         </div>
       ),
       description: (

src/routes/_libraries/paid-support.tsx

@@ -1,6 +1,5 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
-import { HiOutlineMail } from 'react-icons/hi'
 import { MdViewList, MdViewModule, MdFormatListBulleted } from 'react-icons/md'
 import { useState } from 'react'
 import { coreMaintainers } from '~/libraries/maintainers'
@@ -9,6 +8,7 @@ import {
   MaintainerCard,
   MaintainerRowCard,
 } from '~/components/MaintainerCard'
+import { Mail } from 'lucide-react'
 
 export const Route = createFileRoute('/_libraries/paid-support')({
   component: PaidSupportComp,
@@ -157,7 +157,7 @@ function PaidSupportComp() {
               href="mailto:support@tanstack.com?subject=Enterprise%20Support%20Inquiry"
               className="inline-flex items-center gap-3 px-6 py-3 bg-linear-to-r from-green-600 to-cyan-600 text-white rounded-lg font-medium hover:from-blue-700 hover:to-purple-700 transition-all duration-200 hover:shadow-lg hover:scale-105"
             >
-              <HiOutlineMail className="w-5 h-5" />
+              <Mail className="w-5 h-5" />
               Contact Support Team
             </a>
           </div>

src/routes/_libraries/workshops.tsx

@@ -1,7 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { createServerFn } from '@tanstack/react-start'
 import { seo } from '~/utils/seo'
-import { HiOutlineMail } from 'react-icons/hi'
 import {
   LuUsers,
   LuVideo,
@@ -18,6 +17,7 @@ import { allMaintainers, Maintainer } from '~/libraries/maintainers'
 import { MaintainerCard } from '~/components/MaintainerCard'
 import { shuffleWithSeed } from '~/utils/utils'
 import { CheckCircleIcon } from '~/components/icons/CheckCircleIcon'
+import { Mail } from 'lucide-react'
 
 // Server function to get the seed based on 10-second intervals
 // This ensures consistency between server and client
@@ -74,7 +74,7 @@ function WorkshopsPage() {
               href="mailto:workshops@tanstack.com?subject=Workshop%20Inquiry"
               className="inline-flex items-center gap-3 px-8 py-4 bg-linear-to-r from-blue-600 to-purple-600 text-white rounded-lg font-black text-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 hover:shadow-xl hover:scale-105"
             >
-              <HiOutlineMail className="w-6 h-6" />
+              <Mail className="w-6 h-6" />
               Get a Quote
             </a>
           </header>
@@ -235,7 +235,7 @@ function WorkshopsPage() {
               href="mailto:workshops@tanstack.com?subject=Workshop%20Inquiry"
               className="inline-flex items-center gap-3 px-8 py-4 bg-linear-to-r from-blue-600 to-purple-600 text-white rounded-lg font-black text-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 hover:shadow-xl hover:scale-105"
             >
-              <HiOutlineMail className="w-6 h-6" />
+              <Mail className="w-6 h-6" />
               Get a Quote
             </a>
           </div>
@@ -317,7 +317,7 @@ function WorkshopsPage() {
                 href="mailto:workshops@tanstack.com?subject=Workshop%20Questions"
                 className="inline-flex items-center gap-3 px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-all duration-200 hover:shadow-lg"
               >
-                <HiOutlineMail className="w-5 h-5" />
+                <Mail className="w-5 h-5" />
                 Ask Us Anything
               </a>
             </div>
@@ -420,7 +420,7 @@ function WorkshopsPage() {
               href="mailto:workshops@tanstack.com?subject=Workshop%20Inquiry"
               className="inline-flex items-center gap-3 px-8 py-4 bg-linear-to-r from-green-600 to-cyan-600 text-white rounded-lg font-black text-lg hover:from-green-700 hover:to-cyan-700 transition-all duration-200 hover:shadow-xl hover:scale-105"
             >
-              <HiOutlineMail className="w-6 h-6" />
+              <Mail className="w-6 h-6" />
               Get Started Today
             </a>
           </div>
@@ -566,7 +566,7 @@ function InstructorsSection({ instructors }: { instructors: Maintainer[] }) {
           href="mailto:workshops@tanstack.com?subject=Workshop%20Inquiry&body=I'm interested in learning more about your workshop instructors and availability."
           className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-all duration-200 hover:shadow-lg"
         >
-          <HiOutlineMail className="w-5 h-5" />
+          <Mail className="w-5 h-5" />
           Learn More About Our Instructors
         </a>
       </div>

tmp/react-icons-usage.txt

@@ -1,11 +1,3 @@
-Package hi
-  HiOutlineMail
-    - src/routes/_libraries/paid-support.tsx
-    - src/routes/_libraries/workshops.tsx
-Package io
-  IoIosBody
-    - src/libraries/table.tsx
-    - src/libraries/virtual.tsx
 Package lu
   LuBookOpen
     - src/components/Navbar.tsx