fix type errors

package.json

@@ -70,7 +70,6 @@
     "react-fast-marquee": "1.6.4",
     "react-helmet": "6.1.0",
     "react-hook-form": "7.51.5",
-    "react-icons": "5.2.1",
     "react-player": "2.16.0",
     "react-redux": "9.1.2",
     "react-router-dom": "6.23.0",

src/components/Copier/Copier.tsx

@@ -21,14 +21,14 @@ export default function Copier({ text, classes, size, children }: Props) {
         <Icon
           type="Check"
           className={`${icon} cursor-default hover:text-current`}
-          title="Copied!"
+          aria-label="Copied!"
           size={size?.check}
         />
       )) || (
         <Icon
           type="Copy"
           className={`${icon} cursor-pointer`}
-          title="Copy Address"
+          aria-label="Copy Address"
           size={size?.copy}
         />
       )}

src/components/Icon/DrawerIcon.tsx

@@ -1,11 +1,11 @@
-import type { IconBaseProps } from "react-icons";
+import type { LucideProps } from "lucide-react";
 import Icon from "./Icon";
 
 export function DrawerIcon({
   isOpen,
   className,
   ...props
-}: IconBaseProps & { isOpen: boolean }) {
+}: LucideProps & { isOpen: boolean }) {
   return (
     <Icon
       {...props}

src/components/Icon/Icon.tsx

@@ -1,7 +1,7 @@
-import type { IconBaseProps } from "react-icons";
+import type { LucideProps } from "lucide-react";
 import { type IconType, icons } from "./icons";
 
-interface IconProps extends IconBaseProps {
+interface IconProps extends LucideProps {
   type: IconType;
 }
 

src/components/Icon/icons.ts

@@ -18,6 +18,7 @@ import {
   CircleHelp,
   CircleUserRound,
   CircleX,
+  Coins,
   Copy,
   CreditCard,
   Crop,
@@ -61,24 +62,10 @@ import {
   Wallet,
   X,
 } from "lucide-react";
-import { AiFillYoutube, AiOutlineMedium } from "react-icons/ai";
-import { BsTwitter } from "react-icons/bs";
-import {
-  FaBitcoin,
-  FaDiscord,
-  FaFacebook,
-  FaInstagram,
-  FaLinkedin,
-  FaLinkedinIn,
-  FaTelegramPlane,
-  FaTiktok,
-} from "react-icons/fa";
-import { GrFacebookOption } from "react-icons/gr";
 
 export const icons = {
   ArrowRight: ArrowRight,
   Back: ChevronLeft,
-  Bitcoin: FaBitcoin,
   Charity: HeartHandshake,
   Check,
   CheckCircle: CircleCheck,
@@ -88,21 +75,19 @@ export const icons = {
   ChevronRight,
   Close: X,
   CloseCircle: CircleX,
+  Coins,
   Copy,
   CreditCard,
   Crop,
   Dash: Minus,
   Dashboard: LayoutDashboard,
-  Discord: FaDiscord,
   DollarCircle: CircleDollarSign,
   Drag: GripVertical,
   Email: Mail,
   Exclamation: CircleAlert,
   ExternalLink: SquareArrowOutUpRight,
   Eye,
   EyeSlashed: EyeOff,
-  Facebook: GrFacebookOption,
-  FacebookCircle: FaFacebook,
   FileCSV: FileSpreadsheet,
   FileDownload: ArrowDownToLine,
   Filter,
@@ -116,13 +101,9 @@ export const icons = {
   Hospital,
   HourglassSplit: Hourglass,
   Info: CircleAlert,
-  Instagram: FaInstagram,
-  Linkedin: FaLinkedin,
-  LinkedinIn: FaLinkedinIn,
   ListBox: ListCheck,
   Loading: LoaderCircle,
   MapPin,
-  Medium: AiOutlineMedium,
   Menu,
   Moon,
   Next: ChevronRight,
@@ -138,9 +119,6 @@ export const icons = {
   Star,
   StickyNote,
   Sun,
-  Telegram: FaTelegramPlane,
-  Tiktok: FaTiktok,
-  Twitter: BsTwitter,
   Undo,
   University,
   Upload: ArrowUpFromLine,
@@ -150,7 +128,6 @@ export const icons = {
   Wallet: Wallet,
   Warning: TriangleAlert,
   Widget: Blocks,
-  Youtube: AiFillYoutube,
 } as const;
 
 export type IconType = keyof typeof icons;

src/components/Status/types.ts

@@ -1,11 +1,11 @@
+import type { LucideProps } from "lucide-react";
 import type { PropsWithChildren } from "react";
-import type { IconBaseProps } from "react-icons";
 import type { IconType } from "../Icon";
 
 export type StatusProps<T extends JSX.Element | IconType> = PropsWithChildren<{
   icon: T;
   inline?: boolean;
   classes?: string;
   gap?: string;
-  iconOptions?: T extends IconType ? IconBaseProps : never;
+  iconOptions?: T extends IconType ? LucideProps : never;
 }>;

src/components/donation/Steps/DonateMethods/DonateMethods.tsx

@@ -35,7 +35,7 @@ const methods: {
   },
   crypto: {
     name: "Crypto",
-    icon: <Icon type="Bitcoin" className="shrink-0" size={17} />,
+    icon: <Icon type="Coins" className="shrink-0" size={22} />,
     panel: Crypto,
   },
 };

src/pages/Admin/Charity/Banking/PayoutMethods/Table.tsx

@@ -56,7 +56,7 @@ export default function Table({ methods, classes = "" }: Props) {
               <Icon
                 size={22}
                 type="Folder"
-                title="bank statement file"
+                aria-label="bank statement file"
                 className="inline-block"
               />
             </Link>

src/pages/Applications/Table.tsx

@@ -104,7 +104,7 @@ export default function Table({
                 <Icon
                   size={22}
                   type="Folder"
-                  title="application details"
+                  aria-label="application details"
                   className="inline-block"
                 />
               </Link>

src/pages/BankingApplications/Table.tsx

@@ -60,7 +60,7 @@ export default function Table({
                 <Icon
                   size={22}
                   type="Folder"
-                  title="bank statement file"
+                  aria-label="bank statement file"
                   className="inline-block"
                 />
               </Link>

src/pages/Home/common/Button.tsx

@@ -1,10 +1,10 @@
-import { FaArrowRightLong } from "react-icons/fa6";
+import Icon from "components/Icon";
 
 const Button = ({ text }: { text: string }) => {
   return (
     <button className="px-8 py-3.5 bg-blue-d1 text-white rounded-[40px] font-semibold text-base flex items-center  gap-1 font-heading self-center">
       {text}
-      <FaArrowRightLong size={20} className=" ml-1" />
+      <Icon type="ArrowRight" size={20} className=" ml-1" />
     </button>
   );
 };

yarn.lock

@@ -4516,7 +4516,6 @@ __metadata:
     react-fast-marquee: "npm:1.6.4"
     react-helmet: "npm:6.1.0"
     react-hook-form: "npm:7.51.5"
-    react-icons: "npm:5.2.1"
     react-player: "npm:2.16.0"
     react-redux: "npm:9.1.2"
     react-router-dom: "npm:6.23.0"
@@ -8569,15 +8568,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-icons@npm:5.2.1":
-  version: 5.2.1
-  resolution: "react-icons@npm:5.2.1"
-  peerDependencies:
-    react: "*"
-  checksum: 10/8cdf49a9583488f9bb58cbab21f10a5e1993dd9d4f5a62f30fbbce249e4868e8e2c34eb1888adb22014a4319633d1035079bcf5d33b1a8596d745809632699c8
-  languageName: node
-  linkType: hard
-
 "react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0":
   version: 18.2.0
   resolution: "react-is@npm:18.2.0"