Refactor: Migrate Icons to React Icons

package.json

@@ -46,7 +46,7 @@
     "react-dropzone": "^14.3.5",
     "react-hook-form": "^7.53.1",
     "react-i18next": "^15.1.3",
-    "react-icons": "^5.3.0",
+    "react-icons": "^5.4.0",
     "react-leaflet": "^5.0.0-rc.1",
     "react-router-dom": "^6.28.0",
     "react-toastify": "^10.0.6",

src/components/auth/ForgotPassword/ForgotPasswordCard.tsx

@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
+import { CgPassword } from 'react-icons/cg';
 
 const ForgotPasswordCard: React.FC = () => {
   const [email, setEmail] = useState('');
@@ -38,13 +39,7 @@ const ForgotPasswordCard: React.FC = () => {
       <div className="w-[90%] md:w-[440px] px-4 md:px-0">
         <div className="flex flex-col items-center mb-6">
           <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mb-4">
-            <Image
-              src="/img/icon.svg"
-              alt="Password Icon"
-              width={32}
-              height={32}
-              priority
-            />
+            <CgPassword size={32} />
           </div>
           <h1 className="text-xl md:text-2xl font-bold text-black dark:text-gray-200">
             Forgot password?

src/components/auth/NewPassword/PasswordHeader.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import { CgPassword } from 'react-icons/cg';
 
 interface PasswordHeaderProps {
   title: string;
@@ -9,13 +9,7 @@ export function PasswordHeader({ title, subtitle }: PasswordHeaderProps) {
   return (
     <div className="flex flex-col items-center mb-6">
       <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mb-4">
-        <Image
-          src="/img/icon.svg"
-          alt="Password Icon"
-          width={32}
-          height={32}
-          priority
-        />
+        <CgPassword size={32} />
       </div>
       <h1 className="text-xl md:text-2xl font-bold text-black dark:text-gray-200">
         {title}

src/components/bids/ProcessTimeline/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { FaHome, FaMoneyBill, FaBell } from 'react-icons/fa';
+import { GiReceiveMoney } from 'react-icons/gi';
+import { GrDocumentLocked } from 'react-icons/gr';
 
 const Process: React.FC = () => {
   return (
@@ -14,14 +16,12 @@ const Process: React.FC = () => {
           text: 'Step 2 description',
         },
         {
-          // Use icon1.jpg for Step 3
-          image: '/img/icon1.jpg',
+          icon: GrDocumentLocked,
           color: 'bg-gray-400',
           text: 'Step 3 description',
         },
         {
-          // Use icon2.jpg for Step 4
-          image: '/img/icon2.jpg',
+          icon: GiReceiveMoney,
           color: 'bg-gray-400',
           text: 'Step 4 description',
         },