Merge pull request #178 from SpaceyaTech/change_icon_dependencies

I have changed all icon dependencies to react-icon dependency

package.json

@@ -17,9 +17,6 @@
   },
   "dependencies": {
     "@emailjs/browser": "^3.11.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.15",
     "@hookform/resolvers": "^3.3.2",
     "@hookstate/core": "^4.0.1",
@@ -36,6 +33,7 @@
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.48.2",
     "react-hot-toast": "^2.4.1",
+    "react-icons": "^5.2.1",
     "react-lazy-load-image-component": "^1.6.0",
     "react-photo-album": "^2.3.0",
     "react-router-dom": "^6.11.2",

src/APP/components/Button.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
-
-import { arrowRight } from "@/assets/images/icons";
+import { FiArrowRightCircle } from "react-icons/fi";
 
 function Button({ link, title }) {
   return (
@@ -10,7 +9,7 @@ function Button({ link, title }) {
         <span className="capitalize text-green-header text-sm font-semibold">
           {title}
         </span>
-        <img src={arrowRight} alt="arrow-right" className="size-5" />
+        <FiArrowRightCircle className="text-green-header size-5" />
       </div>
     </Link>
   );

src/APP/components/Caroussel.jsx

@@ -1,14 +1,10 @@
-import { faBriefcase } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 import { useRef } from "react";
 import { LazyLoadImage } from "react-lazy-load-image-component";
-import {
-  arrowCircleLeft,
-  arrowCircleRight,
-  greyLinkedin,
-  greyTwitter,
-} from "../../assets/images/icons";
+import { FaBriefcase } from "react-icons/fa";
+import { PiArrowCircleLeft, PiArrowCircleRight } from "react-icons/pi";
+import { FaLinkedinIn } from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
 
 function Caroussel({ CarousselData }) {
   const carouselRef = useRef();
@@ -42,16 +38,11 @@ function Caroussel({ CarousselData }) {
             <div className="bg-green-light flex flex-col gap-2 w-full h-2/6 p-3 rounded-b-2xl">
               <p className=" text-2xl font-medium">{name}</p>
               <p className="flex gap-4 items-center text-base font-light text-grey-neutral space-x-4">
-                <FontAwesomeIcon icon={faBriefcase} />
+                <FaBriefcase />
                 {title}
               </p>
               <p className="flex items-center text-base font-light text-grey-neutral space-x-4">
-                <img
-                  src={greyLinkedin}
-                  alt="Linkedin logo"
-                  width="16"
-                  height="16"
-                />
+                <FaLinkedinIn />
 
                 <a
                   href={linkedin.href}
@@ -64,12 +55,7 @@ function Caroussel({ CarousselData }) {
               </p>
               {twitter.username && (
                 <p className="flex items-center text-base font-light text-grey-neutral space-x-4">
-                  <img
-                    src={greyTwitter}
-                    alt="Twitter logo"
-                    width="16"
-                    height="16"
-                  />
+                  <FaXTwitter />
                   <a
                     href={twitter.href}
                     target="_blank"
@@ -86,10 +72,10 @@ function Caroussel({ CarousselData }) {
       </div>
       <div className="flex justify-center gap-4">
         <button type="button" onClick={() => scroll(-400)}>
-          <img src={arrowCircleLeft} alt="left" />
+          <PiArrowCircleLeft className="text-green-header size-16" />
         </button>
         <button type="button" onClick={() => scroll(400)}>
-          <img src={arrowCircleRight} alt="right" />
+          <PiArrowCircleRight className="text-green-header size-16" />
         </button>
       </div>
     </section>

src/APP/components/FAQ.jsx

@@ -1,6 +1,5 @@
 // eslint-disable-next-line no-unused-vars
-import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FaChevronDown, FaChevronUp } from "react-icons/fa";
 import { useState } from "react";
 
 import { questions } from "../pages/landingPage/data";
@@ -23,7 +22,7 @@ function FAQ() {
         >
           <h2 className="mb-4 font-semibold" id={`flush-heading${index + 1}`}>
             <button
-              className={`group relative flex w-full items-center rounded-none border-0 py-4 px-5  text-left text-base transition ${
+              className={`group relative flex w-full items-center rounded-none border-0 py-4 px-5 text-left text-base transition ${
                 activeQuestion === index
                   ? ""
                   : "overflow-anchor:none hover:z-[2] focus:z-[3]"
@@ -49,9 +48,7 @@ function FAQ() {
                   activeQuestion === index ? "text-primary" : ""
                 }`}
               >
-                <FontAwesomeIcon
-                  icon={activeQuestion === index ? faChevronUp : faChevronDown}
-                />
+                {activeQuestion === index ? <FaChevronUp /> : <FaChevronDown />}
               </span>
             </button>
           </h2>

src/APP/components/Footer.jsx

@@ -5,13 +5,13 @@ import React from "react";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import { Link } from "react-router-dom";
 import {
-  linkedin,
-  twitter,
-  spotify,
-  youtube,
-  instagram,
-  facebook,
-} from "../../assets/images/socials";
+  FaFacebook,
+  FaInstagram,
+  FaLinkedin,
+  FaYoutube,
+  FaSpotify,
+} from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
 import logo from "../../assets/images/sytLogo.png";
 
 function Footer() {
@@ -21,28 +21,32 @@ function Footer() {
   const socialLinks = [
     {
       href: "https://www.facebook.com/spaceyatech",
-      src: facebook,
+      icon: <FaFacebook size="1.8em" />,
       alt: "facebook",
     },
     {
       href: "https://www.instagram.com/spaceyatech/",
-      src: instagram,
+      icon: <FaInstagram size="1.8em" />,
       alt: "instagram",
     },
-    { href: "https://x.com/SpaceYaTech", src: twitter, alt: "twitter" },
+    {
+      href: "https://x.com/SpaceYaTech",
+      icon: <FaXTwitter size="1.8em" />,
+      alt: "twitter",
+    },
     {
       href: "https://linkedin.com/company/spaceyatech",
-      src: linkedin,
+      icon: <FaLinkedin size="1.8em" />,
       alt: "linkedIn",
     },
     {
       href: "https://www.youtube.com/@spaceyatech",
-      src: youtube,
+      icon: <FaYoutube size="1.8em" />,
       alt: "youtube",
     },
     {
       href: "https://open.spotify.com/show/4nUYzhacDAw1v9ClqPY89n",
-      src: spotify,
+      icon: <FaSpotify size="1.8em" />,
       alt: "spotify",
     },
   ];
@@ -89,20 +93,16 @@ function Footer() {
               className="w-[124px] h-32 md:ml-0 ml-4 object-contain"
             />
             {/* socials */}
-
             <div className="flex gap-4 items-center py-4">
               {socialLinks.slice(0, 4).map((link) => (
                 <a
                   key={crypto.randomUUID()}
                   href={link.href}
                   target="_blank"
                   rel="noopener noreferrer"
+                  className="w-7 h-7 text-white"
                 >
-                  <LazyLoadImage
-                    src={link.src}
-                    alt={link.alt}
-                    className="w-7 h-7"
-                  />
+                  {link.icon}
                 </a>
               ))}
             </div>
@@ -113,25 +113,20 @@ function Footer() {
                   href={link.href}
                   target="_blank"
                   rel="noopener noreferrer"
+                  className="w-7 h-7 text-white"
                 >
-                  <LazyLoadImage
-                    src={link.src}
-                    alt={link.alt}
-                    className="w-7 h-7"
-                  />
+                  {link.icon}
                 </a>
               ))}
             </div>
           </div>
 
           {/* Footer links */}
-
           {footerLinks.map((section) => (
             <div key={crypto.randomUUID()} className="flex flex-col gap-8">
               <h2 className="text-[#00FFC3] font-bold sm:text-xl text-lg leading-9">
                 {section.title}
               </h2>
-
               <ul className="flex flex-col gap-5 list-none text-sm font-light">
                 {section.links.map((link) =>
                   link.href ? (
@@ -161,7 +156,6 @@ function Footer() {
               <h2 className="text-[#00FFC3] font-bold sm:text-xl text-lg leading-9">
                 Subscribe to our Newsletter
               </h2>
-
               <div className="flex flex-col gap-5 text-sm font-light">
                 <p className="text-sm left-6">
                   Subscribe to our newsletter to get your
@@ -170,7 +164,6 @@ function Footer() {
                   <br />
                   special offers
                 </p>
-
                 <form className="flex items-center">
                   <input
                     type="email"
@@ -188,18 +181,11 @@ function Footer() {
             </div>
           </div>
         </div>
-
         <div className="sm:mt-14 mt-10">
           <h1 className="text-center text-[#00FFC3] my-4 md:my-8">
             &copy; {year} SpaceYaTech | All Rights Reserved
           </h1>
         </div>
-        {/* <LazyLoadImage
-          src={backup}
-          alt="backup"
-          className="w-7 h-7"
-
-        /> */}
       </div>
     </footer>
   );

src/APP/components/GoBackBtn.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
 
-import { arrowRight } from "@/assets/images/icons";
+import { PiArrowCircleLeft } from "react-icons/pi";
 
 function GoBackBtn() {
   return (
@@ -10,10 +10,9 @@ function GoBackBtn() {
       className="border cursor-pointer rounded-full bg-white p-1 w-fit"
     >
       <div className="flex-center bg-green-light rounded-full px-3 py-1.5 gap-2">
-        <img
-          src={arrowRight}
-          alt="arrow-right"
-          className="size-5 transform rotate-180"
+        <PiArrowCircleLeft
+          className="text-green-header"
+          style={{ fontSize: "25px" }}
         />
         <span className="capitalize text-green-header text-sm font-semibold">
           Go back

src/APP/components/Header.jsx

@@ -1,7 +1,9 @@
 import React, { useState } from "react";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import { Link, useLocation } from "react-router-dom";
-import { cancel, menu } from "../../assets/images/icons";
+import { AiOutlineClose } from "react-icons/ai"; 
+import { HiOutlineMenuAlt4 } from "react-icons/hi";
+
 import logo from "../../assets/images/sytLogo.png";
 
 const navLinks = [
@@ -67,15 +69,17 @@ function Header() {
             className="md:hidden"
             onClick={() => setShowNavlinks(false)}
           >
-            <LazyLoadImage src={cancel} alt="cancel" />
+            <AiOutlineClose className="h-6 w-6 text-white" aria-hidden="true" />{" "}
+            {/* Close Icon */}
           </button>
         ) : (
           <button
             type="button"
             className="md:hidden"
             onClick={() => setShowNavlinks(true)}
           >
-            <LazyLoadImage src={menu} alt="menu" />
+            <HiOutlineMenuAlt4 className="h-6 w-6 text-white" aria-hidden="true" />{" "}
+            {/* Menu Icon */}
           </button>
         )}
 

src/APP/components/ViewMoreBtn.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-import { arrowRight } from "@/assets/images/icons";
+import { FaArrowRight } from "react-icons/fa";
 
 function ViewMoreBtn({ link }) {
   return (
@@ -10,7 +10,10 @@ function ViewMoreBtn({ link }) {
         <span className="capitalize text-green-header text-sm font-semibold">
           Learn more
         </span>
-        <img src={arrowRight} alt="arrow-right" className="size-5" />
+        <FaArrowRight
+          className="text-green-header"
+          style={{ fontSize: "20px" }}
+        />
       </div>
     </Link>
   );

src/APP/components/admin/AdminHeader.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/react-in-jsx-scope */
 import { Link } from "react-router-dom";
 import logo from "../../../assets/images/sytLogo.png";
-import bell from "../../../assets/images/icons/bell-icon.svg";
+import { CiBellOn } from "react-icons/ci";
 import profile from "../../../assets/images/adminPage/profile-pic.png";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 
@@ -14,7 +14,7 @@ function AdminHeader() {
           {/* logo */}
 
           <Link to="/">
-            <LazyLoadImage 
+            <LazyLoadImage
               src={logo}
               alt="logo"
               className="md:w-16 w-12 md:hidden"
@@ -26,7 +26,7 @@ function AdminHeader() {
             className="transition-all duration-300 cursor-pointer"
             to="/notification"
           >
-            <LazyLoadImage  src={bell} alt="notification icon" />
+            <CiBellOn />
           </Link>
           <Link
             className="transition-all duration-300 cursor-pointer"

src/APP/components/admin/Organizers.jsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FaPlus } from "react-icons/fa";
 import { useFieldArray, useForm, Controller } from "react-hook-form";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -152,11 +151,7 @@ function Organizers({ thePrevious, collectedChapter, formComplete }) {
             onClick = {() => append({})}
             className="w-[154px] h-11 px-3.5 py-3 rounded-lg border border-emerald-600 text-emerald-600 text-[13px] font-medium leading-tight tracking-tight justify-end items-center gap-2.5 inline-flex"
           >
-            <FontAwesomeIcon
-              icon={faPlus}
-              size="xl"
-              style={{ color: "#009975" }}
-            />
+            <FaPlus className="size-xl text-[#009975]" />
             Add Organizer
           </button>
         </div>