[Dashboard] Remove react-icons (2) (#4983)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating icon imports from `react-icons` to `lucide-react` across several components, enhancing consistency and potentially reducing bundle size.

### Detailed summary
- Replaced `FiMenu` with `MenuIcon` in `MobileMenu.tsx`.
- Replaced `FiSearch` with `SearchIcon` in `HackathonFooter.tsx`.
- Replaced `FiArrowRight` with `MoveRightIcon` in `TWQueryTable.tsx`.
- Replaced `BsFillLightningChargeFill` with `ZapIcon` in `HomePageCard.tsx` and `HeroSection.tsx`.
- Replaced `BsShieldCheck` with `ShieldCheckIcon` in `PublishedContract`.
- Replaced `FiArrowRight` and `FaEllipsisVertical` with `MoveRightIcon` and `EllipsisVerticalIcon` in `TWTable.tsx`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/src/components/contract-components/published-contract/index.tsx

@@ -14,9 +14,9 @@ import { ContractFunctionsOverview } from "components/contract-functions/contrac
 import { format } from "date-fns/format";
 import { correctAndUniqueLicenses } from "lib/licenses";
 import { replaceIpfsUrl } from "lib/sdk";
+import { ShieldCheckIcon } from "lucide-react";
 import { useMemo } from "react";
 import { BiPencil } from "react-icons/bi";
-import { BsShieldCheck } from "react-icons/bs";
 import { VscBook, VscCalendar, VscServer } from "react-icons/vsc";
 import type { ThirdwebClient } from "thirdweb";
 import { useActiveAccount } from "thirdweb/react";
@@ -181,7 +181,7 @@ export const PublishedContract: React.FC<PublishedContractProps> = ({
                 {publishedContract?.audit && (
                   <ListItem>
                     <Flex gap={2} alignItems="flex-start">
-                      <Icon as={BsShieldCheck} boxSize={5} color="green" />
+                      <ShieldCheckIcon className="size-5 text-green-500" />
                       <Flex direction="column" gap={1}>
                         <Heading as="h5" size="label.sm">
                           Audit Report

apps/dashboard/src/components/hackathon/HackathonFooter.tsx

@@ -1,8 +1,7 @@
-import { Flex, Icon } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { useTrack } from "hooks/analytics/useTrack";
-import { WandIcon } from "lucide-react";
-import { FiSearch } from "react-icons/fi";
+import { SearchIcon, WandIcon } from "lucide-react";
 import { Heading, LinkButton } from "tw-components";
 
 interface HackathonFooterProps {
@@ -81,7 +80,7 @@ export const HackathonFooter = ({
           h="68px"
           w={{ base: "90%", md: 80 }}
           fontSize="20px"
-          leftIcon={<Icon as={FiSearch} />}
+          leftIcon={<SearchIcon className="size-5" />}
           color="black"
           flexShrink={0}
           background="rgba(255,255,255,1)"

apps/dashboard/src/components/homepage/sections/HeroSection.tsx

@@ -1,8 +1,8 @@
-import { Flex, Icon, SimpleGrid } from "@chakra-ui/react";
+import { Flex, SimpleGrid } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
+import { ZapIcon } from "lucide-react";
 import { useEffect, useState } from "react";
-import { BsFillLightningChargeFill } from "react-icons/bs";
 import { Heading, Text, TrackedLink, TrackedLinkButton } from "tw-components";
 import { getCookie } from "../../../stores/SyncStoreToCookies";
 import { Aurora } from "../Aurora";
@@ -153,7 +153,7 @@ function GetStartedButtonLink(props: {
 
   return (
     <TrackedLinkButton
-      leftIcon={<Icon as={BsFillLightningChargeFill} boxSize={4} />}
+      leftIcon={<ZapIcon className="size-4 fill-black" />}
       py={6}
       px={8}
       w="full"

apps/dashboard/src/components/homepage/sections/HomePageCard.tsx

@@ -1,9 +1,9 @@
-import { Container, Flex, Icon, SimpleGrid } from "@chakra-ui/react";
+import { Container, Flex, SimpleGrid } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { LandingDesktopMobileImage } from "components/landing-pages/desktop-mobile-image";
+import { ZapIcon } from "lucide-react";
 import type { StaticImageData } from "next/image";
 import type { ReactNode } from "react";
-import { BsFillLightningChargeFill } from "react-icons/bs";
 import { Heading, Text, TrackedLinkButton } from "tw-components";
 
 interface HomePageCardProps {
@@ -96,7 +96,7 @@ const HomePageCard = ({
               label={label}
               fontWeight="bold"
               maxW="190px"
-              leftIcon={<Icon as={BsFillLightningChargeFill} boxSize={4} />}
+              leftIcon={<ZapIcon className="size-4 fill-black" />}
             >
               {ctaText}
             </TrackedLinkButton>

apps/dashboard/src/components/product-pages/common/nav/MobileMenu.tsx

@@ -5,7 +5,7 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
-import { FiMenu } from "react-icons/fi";
+import { MenuIcon } from "lucide-react";
 import { Drawer, Heading, TrackedLink, TrackedLinkButton } from "tw-components";
 import {
   DEVELOPER_RESOURCES,
@@ -35,7 +35,7 @@ export const MobileMenu: React.FC<FlexProps> = (props) => {
       </TrackedLinkButton>
       <IconButton
         aria-label="Homepage Menu"
-        icon={<FiMenu />}
+        icon={<MenuIcon className="size-4" />}
         variant="ghost"
         onClick={disclosure.onOpen}
       />

apps/dashboard/src/components/shared/TWQueryTable.tsx

@@ -3,7 +3,6 @@ import {
   ButtonGroup,
   Flex,
   GridItem,
-  Icon,
   Select,
   SimpleGrid,
   Skeleton,
@@ -22,9 +21,9 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
+import { MoveRightIcon } from "lucide-react";
 import pluralize from "pluralize";
 import { type SetStateAction, useMemo } from "react";
-import { FiArrowRight } from "react-icons/fi";
 import { Button, TableContainer, Text } from "tw-components";
 
 type TWQueryTableProps<TRowData, TInputData> = {
@@ -122,7 +121,7 @@ export function TWQueryTable<TRowData, TInputData>(
                       borderBottomWidth="inherit"
                       borderBottomColor="hsl(var(--border))"
                     >
-                      <Icon as={FiArrowRight} />
+                      <MoveRightIcon className="size-4" />
                     </Td>
                   )}
                 </Tr>

apps/dashboard/src/components/shared/TWTable.tsx

@@ -27,10 +27,9 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
+import { EllipsisVerticalIcon, MoveRightIcon } from "lucide-react";
 import pluralize from "pluralize";
 import { type SetStateAction, useMemo, useState } from "react";
-import { FaEllipsisVertical } from "react-icons/fa6";
-import { FiArrowRight } from "react-icons/fi";
 import type { IconType } from "react-icons/lib";
 
 type CtaMenuItem<TRowData> = {
@@ -191,7 +190,7 @@ export function TWTable<TRowData>(tableProps: TWTableProps<TRowData>) {
                 {/* Show a ... menu or individual CTA buttons. */}
                 {tableProps.onRowClick ? (
                   <TableCell className="text-end">
-                    <FiArrowRight className="size-4" />
+                    <MoveRightIcon className="size-4" />
                   </TableCell>
                 ) : tableProps.onMenuClick ? (
                   <TableCell className="text-end">
@@ -202,7 +201,7 @@ export function TWTable<TRowData>(tableProps: TWTableProps<TRowData>) {
                           aria-label="Actions"
                           className="!h-auto relative z-10 p-2.5"
                         >
-                          <FaEllipsisVertical className="size-4" />
+                          <EllipsisVerticalIcon className="size-4" />
                         </Button>
                       </DropdownMenuTrigger>
                       <DropdownMenuContent>