Removed heroicon, replaced with fa6 icons

package.json

@@ -18,7 +18,6 @@
     "dependencies": {
         "@auth/core": "^0.40.0",
         "@headlessui/react": "^2.2.9",
-        "@heroicons/react": "^2.2.0",
         "@react-three/postprocessing": "^3.0.4",
         "@tanstack/react-query": "^5.90.19",
         "@uidotdev/usehooks": "^2.4.1",

src/app/donate/[form]/page.tsx

@@ -2,8 +2,8 @@
 
 import styles from './page.module.css'
 import { useCurrentUser } from '@/util/hooks'
-import { ArrowPathIcon } from '@heroicons/react/24/outline'
 import { useParams, useSearchParams } from 'next/navigation'
+import { FaArrowsRotate } from 'react-icons/fa6'
 
 export default function Page() {
     const routeParams = useParams()
@@ -35,7 +35,7 @@ export default function Page() {
     return (
         <div className={styles.page}>
             <div className={styles.content}>
-                <ArrowPathIcon className={styles.spinner} />
+                <FaArrowsRotate className={styles.spinner} />
                 <p className={styles.text}>Redirecting...</p>
             </div>
         </div>

src/app/login/LoginPage.tsx

@@ -4,9 +4,9 @@ import { LoginCard } from './LoginCard'
 import styles from './login.module.css'
 import { HalftoneBackground } from '@/components/halftone/HalftoneBackground'
 import { MainLayout } from '@/components/layout'
-import { InformationCircleIcon } from '@heroicons/react/24/solid'
 import Link from 'next/link'
 import { Suspense } from 'react'
+import { FaCircleInfo } from 'react-icons/fa6'
 
 export default function Login() {
     return (
@@ -19,7 +19,7 @@ export default function Login() {
                     <LoginCard />
                 </Suspense>
                 <div className={styles.footer}>
-                    <InformationCircleIcon className={styles.infoIcon} />
+                    <FaCircleInfo className={styles.infoIcon} />
                     By signing in you agree to our
                     <Link
                         href="/privacy"

src/app/volunteer/stages/CompleteStage.tsx

@@ -1,6 +1,6 @@
 import styles from './stages.module.css'
 import { cn } from '@/util'
-import { CakeIcon, TrophyIcon } from '@heroicons/react/24/solid'
+import { FaCakeCandles, FaTrophy } from 'react-icons/fa6'
 
 export interface CompleteStageProps {
     isInServer: boolean
@@ -13,7 +13,7 @@ export function CompleteStage({
     isPending,
     onRejoin,
 }: CompleteStageProps) {
-    const Icon = isInServer ? CakeIcon : TrophyIcon
+    const Icon = isInServer ? FaCakeCandles : FaTrophy
     const subtitle = isInServer
         ? 'Congrats, you are in the server!'
         : "Looks like you're no longer in the server!"

src/app/volunteer/stages/JoiningStage.tsx

@@ -1,7 +1,7 @@
 import styles from './stages.module.css'
 import { cn } from '@/util'
 import { useInit } from '@/util/hooks'
-import { ArrowPathIcon } from '@heroicons/react/24/solid'
+import { FaArrowsRotate } from 'react-icons/fa6'
 
 export interface JoiningStageProps {
     isPending: boolean
@@ -33,7 +33,11 @@ export function JoiningStage({ isPending, error, onJoin }: JoiningStageProps) {
                 </>
             ) : (
                 <>
-                    <ArrowPathIcon className={cn(styles.icon, styles.spin)} />
+                    {
+                        <FaArrowsRotate
+                            className={cn(styles.icon, styles.spin)}
+                        />
+                    }
                     <p className={styles.subtitle}>
                         Joining you to the server...
                     </p>

src/app/volunteer/stages/UnderageStage.tsx

@@ -1,7 +1,7 @@
 import styles from './stages.module.css'
 import { cn } from '@/util'
 import { useInit } from '@/util/hooks'
-import { CalendarIcon } from '@heroicons/react/24/solid'
+import { FaCalendar } from 'react-icons/fa6'
 
 export interface UnderageStageProps {
     isPending: boolean
@@ -13,7 +13,7 @@ export function UnderageStage({ isPending, onAgeUp }: UnderageStageProps) {
 
     return (
         <div className={styles.container}>
-            <CalendarIcon className={cn(styles.icon, styles.success)} />
+            <FaCalendar className={cn(styles.icon, styles.success)} />
             <p className={styles.subtitle}>
                 Sorry! You have to be 18 years old or older to volunteer with
                 Progressive Victory.

src/app/volunteer/stages/components/Toggle.tsx

@@ -1,7 +1,7 @@
 import styles from './components.module.css'
 import { cn } from '@/util'
-import { InformationCircleIcon } from '@heroicons/react/24/solid'
 import { ReactElement } from 'react'
+import { FaCircleInfo } from 'react-icons/fa6'
 
 export function Toggle({
     name,
@@ -22,7 +22,7 @@ export function Toggle({
         <div className={styles.toggleContainer}>
             <div className={styles.toggleLabelContainer}>
                 <div tabIndex={0} className={styles.tooltipContainer}>
-                    <InformationCircleIcon className={styles.tooltipIcon} />
+                    <FaCircleInfo className={styles.tooltipIcon} />
                     <div className={styles.tooltipElement}>
                         <span className={styles.tooltipContent}>{tooltip}</span>
                     </div>

src/components/DropdownQuestion.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import styles from '@/components/content_sections/ContentSections.module.css'
-import { PlusIcon, MinusIcon } from '@heroicons/react/24/solid'
 import type React from 'react'
 import { useEffect, useRef, useState } from 'react'
+import { FaPlus, FaMinus } from 'react-icons/fa6'
 
 export interface DropdownQuestionProps {
     question: string
@@ -58,9 +58,9 @@ export function DropdownQuestion({
 
                 <span style={iconWrapperStyle}>
                     {isOpen ? (
-                        <MinusIcon style={iconStyle} />
+                        <FaMinus style={iconStyle} />
                     ) : (
-                        <PlusIcon style={iconStyle} />
+                        <FaPlus style={iconStyle} />
                     )}
                 </span>
             </div>

src/components/common/dropdown/DropdownButton.tsx

@@ -1,14 +1,14 @@
 'use client'
 
 import styles from './DropdownButton.module.css'
-import { EllipsisVerticalIcon } from '@heroicons/react/24/outline'
 import {
     forwardRef,
     useEffect,
     useRef,
     useState,
     type MouseEvent as ReactMouseEvent,
 } from 'react'
+import { FaEllipsisVertical } from 'react-icons/fa6'
 import { FiChevronDown } from 'react-icons/fi'
 import { IoClose } from 'react-icons/io5'
 
@@ -193,7 +193,7 @@ export const DropdownButton = forwardRef<
                         icon
                     )
                 ) : variant.showEllipsisIcon ? (
-                    <EllipsisVerticalIcon
+                    <FaEllipsisVertical
                         className={styles.shortIcon}
                         aria-hidden="true"
                     />

src/components/common/twitter_card_element/Card.tsx

@@ -3,17 +3,6 @@
 import styles from './Card.module.css'
 import { BaseButton } from '@/components/common/buttons/Button'
 import { cn } from '@/util'
-import {
-    HeartIcon,
-    ChatBubbleLeftRightIcon,
-    ArrowUpOnSquareIcon,
-    EllipsisHorizontalIcon,
-} from '@heroicons/react/24/outline'
-import {
-    HeartIcon as SolidHeartIcon,
-    ChatBubbleLeftRightIcon as SolidChatBubbleLeftRightIcon,
-    ArrowUpOnSquareIcon as SolidArrowUpOnSquareIcon,
-} from '@heroicons/react/24/solid'
 import {
     motion,
     useSpring,
@@ -24,6 +13,13 @@ import {
 import Image from 'next/image'
 import type React from 'react'
 import { useState, useMemo } from 'react'
+import {
+    FaHeart as SolidHeart,
+    FaRegHeart as Heart,
+    FaRegComment as FaComment,
+    FaRegShareFromSquare as FaShare,
+    FaEllipsis,
+} from 'react-icons/fa6'
 
 interface MotionProps {
     initial?: TargetAndTransition
@@ -350,7 +346,7 @@ export function Message({
                                                     e.stopPropagation()
                                                 }
                                             >
-                                                <EllipsisHorizontalIcon
+                                                <FaEllipsis
                                                     className={
                                                         styles.ellipsisIcon
                                                     }
@@ -399,15 +395,15 @@ export function Message({
                                         aria-label="Comment"
                                     >
                                         {clickedBubble ? (
-                                            <SolidChatBubbleLeftRightIcon
+                                            <FaComment
                                                 className={cn(
                                                     styles.iconSolid,
                                                     styles.bubbleActive,
                                                     styles.iconGrowPop
                                                 )}
                                             />
                                         ) : (
-                                            <ChatBubbleLeftRightIcon
+                                            <FaComment
                                                 className={styles.icon}
                                             />
                                         )}
@@ -423,17 +419,15 @@ export function Message({
                                         aria-label="Share"
                                     >
                                         {clickedShare ? (
-                                            <SolidArrowUpOnSquareIcon
+                                            <FaShare
                                                 className={cn(
                                                     styles.iconSolid,
                                                     styles.shareActive,
                                                     styles.iconGrowPop
                                                 )}
                                             />
                                         ) : (
-                                            <ArrowUpOnSquareIcon
-                                                className={styles.icon}
-                                            />
+                                            <FaShare className={styles.icon} />
                                         )}
                                     </button>
 
@@ -447,17 +441,15 @@ export function Message({
                                         aria-label="Like"
                                     >
                                         {clickedHeart ? (
-                                            <SolidHeartIcon
+                                            <SolidHeart
                                                 className={cn(
                                                     styles.iconSolid,
                                                     styles.heartActive,
                                                     styles.iconGrowPop
                                                 )}
                                             />
                                         ) : (
-                                            <HeartIcon
-                                                className={styles.icon}
-                                            />
+                                            <Heart className={styles.icon} />
                                         )}
                                     </button>
                                 </div>