replace Material Design icons with Lucide icons for consistency across multiple components

Author: LadyBluenotes

src/components/DocsLayout.tsx

@@ -80,7 +80,7 @@ const useMenuConfig = ({
       {
         label: (
           <div className="flex items-center gap-2">
-            GitHub <GithubIcon className="opacity-20" size={16} />
+            GitHub <GithubIcon className="opacity-20" />
           </div>
         ),
         to: `https://github.com/${repo}`,
@@ -141,14 +141,11 @@ type DocsLayoutProps = {
 }
 
 export function DocsLayout({
-  name,
-  version,
   colorFrom,
   colorTo,
   textColor,
   config,
   frameworks,
-  versions,
   repo,
   children,
 }: DocsLayoutProps) {

src/components/FilterComponents.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { useState } from 'react'
-import { MdExpandMore } from 'react-icons/md'
-import { Table, List } from 'lucide-react'
+import { Table, List, ChevronDown } from 'lucide-react'
 import { useDebouncedValue } from '@tanstack/react-pacer'
 import { twMerge } from 'tailwind-merge'
 
@@ -67,7 +66,7 @@ export function FilterSection({
           className="flex items-center gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors flex-1 py-0"
         >
           <span>{title}</span>
-          <MdExpandMore
+          <ChevronDown
             className={twMerge(
               'w-3.5 h-3.5 transition-transform',
               !isExpanded && 'rotate-90',
@@ -186,11 +185,8 @@ interface FilterBarProps {
 export function FilterBar({
   children,
   title = 'Filters',
-  onClearFilters,
-  hasActiveFilters,
   mobileControls,
   desktopHeader,
-  viewMode,
 }: FilterBarProps) {
   const [isOpen, setIsOpen] = useState(false)
 
@@ -207,7 +203,7 @@ export function FilterBar({
               <span className="text-sm font-semibold text-gray-900 dark:text-white">
                 {title}
               </span>
-              <MdExpandMore
+              <ChevronDown
                 className={twMerge(
                   'w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform flex-shrink-0',
                   !isOpen && 'rotate-90',

src/components/Navbar.tsx

@@ -97,7 +97,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
       <Authenticated>
         {!canAdmin ? (
           <div className="flex items-center gap-2 px-2 py-1 rounded-lg">
-            <User />
+            <User size={16} />
             <Link
               to="/account"
               className="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white whitespace-nowrap"
@@ -377,7 +377,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
                         'rounded-lg hover:bg-gray-500/10 dark:hover:bg-gray-500/30',
                       )}
                     >
-                      <Users />
+                      <Users size={14} />
                       Contributors
                     </Link>
                   </div>

src/components/SearchButton.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { Command } from 'lucide-react'
-import { MdSearch } from 'react-icons/md'
+import { Command, Search } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { useSearchContext } from '~/contexts/SearchContext'
 
@@ -21,7 +20,7 @@ export function SearchButton({ className }: SearchButtonProps) {
       )}
     >
       <div className="flex items-center gap-1 text-sm">
-        <MdSearch className="text-lg" /> Search...
+        <Search size={18} /> Search...
       </div>
       <div className="flex items-center bg-white/50 dark:bg-gray-500/50 rounded-md px-2 py-1 gap-1 font-bold text-xs whitespace-nowrap">
         <Command size={12} /> + K

src/components/SearchModal.tsx

@@ -12,8 +12,7 @@ import {
   Pagination,
 } from 'react-instantsearch'
 import { liteClient } from 'algoliasearch/lite'
-import { X } from 'lucide-react'
-import { MdSearch } from 'react-icons/md'
+import { X, Search } from 'lucide-react'
 import { Link, useRouterState } from '@tanstack/react-router'
 import { useSearchContext } from '~/contexts/SearchContext'
 import { libraries } from '~/libraries'
@@ -309,7 +308,7 @@ function NoResults() {
 }
 
 const submitIconComponent = () => {
-  return <MdSearch />
+  return <Search size={18} />
 }
 
 const resetIconComponent = () => {

src/routes/$libraryId/$version.docs.contributors.tsx

@@ -4,15 +4,14 @@ import { DocContainer } from '~/components/DocContainer'
 import { DocTitle } from '~/components/DocTitle'
 import { getLibrary } from '~/libraries'
 import { ContributorsWall } from '~/components/ContributorsWall'
-import {} from '@tanstack/react-router'
 import { getLibraryContributors } from '~/libraries/maintainers'
 import {
   MaintainerCard,
   CompactMaintainerCard,
   MaintainerRowCard,
 } from '~/components/MaintainerCard'
-import { MdViewList, MdViewModule, MdFormatListBulleted } from 'react-icons/md'
 import { useState } from 'react'
+import { Grid2X2, Grid3X3, LayoutList } from 'lucide-react'
 
 export const Route = createFileRoute('/$libraryId/$version/docs/contributors')({
   component: RouteComponent,
@@ -64,7 +63,7 @@ function RouteComponent() {
                   }`}
                   title="Compact cards"
                 >
-                  <MdViewList className="w-5 h-5" />
+                  <Grid3X3 className="w-5 h-5" />
                 </button>
                 <button
                   onClick={() => setViewMode('full')}
@@ -75,7 +74,7 @@ function RouteComponent() {
                   }`}
                   title="Full cards"
                 >
-                  <MdViewModule className="w-5 h-5" />
+                  <Grid2X2 className="w-5 h-5" />
                 </button>
                 <button
                   onClick={() => setViewMode('row')}
@@ -86,7 +85,7 @@ function RouteComponent() {
                   }`}
                   title="Row cards"
                 >
-                  <MdFormatListBulleted className="w-5 h-5" />
+                  <LayoutList className="w-5 h-5" />
                 </button>
               </div>
             </div>

src/routes/_libraries/maintainers.tsx

@@ -2,13 +2,7 @@ import { createFileRoute } from '@tanstack/react-router'
 import { z } from 'zod'
 import { useState } from 'react'
 import * as React from 'react'
-import { X } from 'lucide-react'
-import {
-  MdFilterList,
-  MdViewList,
-  MdViewModule,
-  MdFormatListBulleted,
-} from 'react-icons/md'
+import { X, ListFilter, Grid2X2, Grid3X3, LayoutList } from 'lucide-react'
 import { Footer } from '~/components/Footer'
 import {
   MaintainerCard,
@@ -25,7 +19,6 @@ import {
   getRoleForFilteredLibraries,
 } from '~/libraries/maintainers'
 import { Library, libraries } from '~/libraries'
-// import { fetchAllMaintainerStats } from '~/utils/docs'
 
 const librarySchema = z.enum([
   'start',
@@ -64,26 +57,6 @@ export const Route = createFileRoute('/_libraries/maintainers')({
       keywords: 'tanstack,maintainers,contributors,open source,developers',
     }),
   }),
-  // loader: async ({ context: { queryClient } }) => {
-  //   try {
-  //     // Fetch GitHub stats for all maintainers
-  //     const stats = await queryClient.ensureQueryData({
-  //       queryKey: ['maintainerStats'],
-  //       queryFn: () => fetchAllMaintainerStats(),
-  //       staleTime: 1000 * 60 * 30, // 30 minutes
-  //     })
-
-  //     return {
-  //       stats,
-  //     }
-  //   } catch (error) {
-  //     console.error('Error loading maintainer stats:', error)
-  //     // Return empty stats array if there's an error
-  //     return {
-  //       stats: [],
-  //     }
-  //   }
-  // },
 })
 
 interface FilterProps {
@@ -174,7 +147,7 @@ function MaintainersFilter({
             }`}
             title="Compact cards"
           >
-            <MdViewList className="w-5 h-5" />
+            <Grid3X3 className="w-5 h-5" />
           </button>
           <button
             onClick={() => onViewModeChange('full')}
@@ -185,7 +158,7 @@ function MaintainersFilter({
             }`}
             title="Full cards"
           >
-            <MdViewModule className="w-5 h-5" />
+            <Grid2X2 className="w-5 h-5" />
           </button>
           <button
             onClick={() => onViewModeChange('row')}
@@ -196,7 +169,7 @@ function MaintainersFilter({
             }`}
             title="Row cards"
           >
-            <MdFormatListBulleted className="w-5 h-5" />
+            <LayoutList className="w-5 h-5" />
           </button>
         </div>
 
@@ -206,7 +179,7 @@ function MaintainersFilter({
             onClick={() => setIsOpen(!isOpen)}
             className="inline-flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
           >
-            <MdFilterList className="w-4 h-4" />
+            <ListFilter className="w-4 h-4" />
             Filter & Sort
             {hasFilters && (
               <span className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-0.5 rounded-full text-xs">

src/routes/_libraries/paid-support.tsx

@@ -1,14 +1,13 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
-import { MdViewList, MdViewModule, MdFormatListBulleted } from 'react-icons/md'
 import { useState } from 'react'
 import { coreMaintainers } from '~/libraries/maintainers'
 import {
   CompactMaintainerCard,
   MaintainerCard,
   MaintainerRowCard,
 } from '~/components/MaintainerCard'
-import { Mail } from 'lucide-react'
+import { Grid2x2, Grid3X3, LayoutList, Mail } from 'lucide-react'
 
 export const Route = createFileRoute('/_libraries/paid-support')({
   component: PaidSupportComp,
@@ -68,7 +67,7 @@ function PaidSupportComp() {
                 }`}
                 title="Compact cards"
               >
-                <MdViewList className="w-5 h-5" />
+                <Grid3X3 className="w-5 h-5" />
               </button>
               <button
                 onClick={() => setViewMode('full')}
@@ -79,7 +78,7 @@ function PaidSupportComp() {
                 }`}
                 title="Full cards"
               >
-                <MdViewModule className="w-5 h-5" />
+                <Grid2x2 className="w-5 h-5" />
               </button>
               <button
                 onClick={() => setViewMode('row')}
@@ -90,7 +89,7 @@ function PaidSupportComp() {
                 }`}
                 title="Row cards"
               >
-                <MdFormatListBulleted className="w-5 h-5" />
+                <LayoutList className="w-5 h-5" />
               </button>
             </div>
           </div>

src/routes/_libraries/partners.tsx

@@ -6,8 +6,7 @@ import { z } from 'zod'
 import { Library } from '~/libraries'
 import { useState } from 'react'
 import * as React from 'react'
-import { X } from 'lucide-react'
-import { MdFilterList } from 'react-icons/md'
+import { ListFilter, X } from 'lucide-react'
 import { startProject } from '~/libraries/start'
 import { routerProject } from '~/libraries/router'
 import { queryProject } from '~/libraries/query'
@@ -135,7 +134,7 @@ function PartnersFilter({
             onClick={() => setIsOpen(!isOpen)}
             className="inline-flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
           >
-            <MdFilterList className="w-4 h-4" />
+            <ListFilter className="w-4 h-4" />
             Filter Partners
             {hasFilters && (
               <span className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-0.5 rounded-full text-xs">