remove lucide and FA to make way for react-icons

.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "root": true,
+  "extends": ["myfursona"],
+  "settings": {
+    "next": {
+      "rootDir": ["apps/*/"]
+    }
+  }
+}

TODO.md

@@ -1,6 +1,5 @@
 ## TODO list
 
-
 ### Components
 
 - [ ] Notification Drop Down
@@ -17,7 +16,7 @@
 - [ ] Completed Landing Page
 - [ ] Terms and Service
 - [ ] Pricing Page
-- [ ] Character 
+- [ ] Character
 - [ ] Art Page
 - [ ] Character Shop Page
 - [ ] Character Gallery Page
@@ -26,10 +25,9 @@
 
 - [ ] Avatar Cropper (Appears when Uploading Images for Characters/Characters)
 
-
-*Tasks listed below are just waiting to get the backend setup*
+_Tasks listed below are just waiting to get the backend setup_
 
 - [ ] Authentication, Signing In, Out, Registering, Email Verification
 - [ ] Ability to create a Fursona
 - [ ] Ability to upload images
-- [ ] Access Control on Characters
+- [ ] Access Control on Characters

apps/website/package.json

@@ -9,9 +9,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-brands-svg-icons": "^6.4.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.17",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
@@ -27,19 +24,20 @@
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "autoprefixer": "^10.4.15",
+    "class-variance-authority": "^0.7.0",
     "detect-browser": "^5.3.0",
     "eslint": "^8.48.0",
     "eslint-config-next": "^13.4.19",
     "framer-motion": "^10.12.18",
     "gray-matter": "^4.0.3",
     "gsap": "^3.12.2",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.269.0",
     "next": "^13.4.19",
     "next-pwa": "^5.6.0",
     "postcss": "^8.4.28",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
     "react-player": "^2.13.0",
     "react-quill": "^2.0.0",
     "sass": "^1.66.1",

apps/website/src/app/blog/page.tsx

@@ -1,6 +1,6 @@
 import { MarginClamp, Separator, Tabs } from "@/components/ui"
 import { Button } from "@/components/ui/Buttons"
-import { RssIcon, SearchIcon } from "lucide-react"
+import { LuRss as RssIcon, LuSearch as SearchIcon } from "react-icons/lu"
 import type { Metadata } from "next"
 
 const title = "Blog"

apps/website/src/app/browse/ShelfSection.tsx

@@ -1,21 +1,21 @@
 import { Carousel, GridResponsive } from "@/components/ui"
-import type { LucideIcon } from "lucide-react"
+import type { IconType } from "react-icons"
 
 export default function ShelfSection({
   children,
   icon: Icon,
   title
 }: {
   children?: React.ReactNode
-  icon?: LucideIcon
+  icon?: IconType
   title?: string
 }) {
   return (
     <Carousel
       as="section"
       title={
         <span className="flex items-center gap-x-1 font-bold font-inter text-2xl">
-          <Icon size={26} className="mr-2" />
+          <Icon size="1.3rem" className="mr-2" />
           {title}
         </span>
       }

apps/website/src/app/browse/page.tsx

@@ -1,4 +1,9 @@
-import { Brush, Heart, Layers, Sparkles } from "lucide-react"
+import {
+  LuBrush as Brush,
+  LuHeart as Heart,
+  LuLayers as Layers,
+  LuSparkles as Sparkles
+} from "react-icons/lu"
 import { FursonaCard } from "@/components/ui/Cards"
 import type { FursonaStatus } from "@/types/Fursonas"
 import ShelfSection from "./ShelfSection"
@@ -47,7 +52,7 @@ export default function Browse() {
               Artists Open for Comissions
             </span>
             <hr />
-            <div></div>
+            <div />
           </div>
         </div>
         <div className="flex flex-row my-3">
@@ -56,7 +61,7 @@ export default function Browse() {
             Curated Collections
           </span>
           <hr />
-          <div></div>
+          <div />
         </div>
       </div>
     </MarginClamp>

apps/website/src/app/profile/[profile]/(characters)/characters/CharacterView.tsx

@@ -1,7 +1,11 @@
 "use client"
 
 import { useState } from "react"
-import { CheckCircle2Icon, FolderPlus, XIcon } from "lucide-react"
+import {
+  LuCheckCircle2 as CheckCircle2Icon,
+  LuFolderPlus as FolderPlus,
+  LuX as XIcon
+} from "react-icons/lu"
 import { FolderView, GridResponsive, Modal } from "@/components/ui"
 import { FursonaCard, PinnedCharacter } from "@/components/ui/Cards"
 import { Button } from "@/components/ui/Buttons"

apps/website/src/app/profile/[profile]/(gallery)/gallery/page.tsx

@@ -1,5 +1,5 @@
 import { SlugRouteProps } from "@/types"
-import { Palette } from "lucide-react"
+import { LuPalette as Palette } from "react-icons/lu"
 import { Metadata, ResolvingMetadata } from "next"
 
 export async function generateMetadata(

apps/website/src/app/profile/[profile]/CharacterMasthead.tsx

@@ -4,16 +4,14 @@ import { useEffect, useRef } from "react"
 import Image from "next/image"
 import { Button } from "@/components/ui/Buttons"
 import {
-  ArrowLeft,
-  BookMarked,
-  EditIcon,
-  HeartIcon,
-  HistoryIcon,
-  HomeIcon,
-  LayoutGridIcon,
-  // LockIcon
-} from "lucide-react"
-// import {Badge} from '@/../../../packages/ui'
+  LuArrowLeft as ArrowLeft,
+  LuBookMarked as BookMarked,
+  LuPencil as EditIcon,
+  LuHeart as HeartIcon,
+  LuHistory as HistoryIcon,
+  LuHome as HomeIcon,
+  LuLayoutGrid as LayoutGridIcon
+} from "react-icons/lu"
 import { Tabs } from "@/components/ui"
 import { useDetailPeekContext } from "@/context"
 
@@ -61,7 +59,7 @@ export default function CharacterMasthead({
     <div id="masthead-root" className="contents">
       <div ref={profileDetailsRef} className="px-12 mx-auto max-w-screen-2xl">
         <Button
-         href={`/@${owner}`}
+          href={`/@${owner}`}
           prefixIcon={<ArrowLeft className="mr-3" />}
           className="mb-4 my-8 flex flex-row items-center bg-300 px-4 py-2 rounded-lg hover:bg-400 transition-all ease-in-out duration-200"
         >
@@ -111,7 +109,6 @@ export default function CharacterMasthead({
                   count={3}
                 >
                   Favorite
-
                 </Button>
               </div>
             </div>

apps/website/src/app/profile/[profile]/DynamicMasthead.tsx

@@ -4,7 +4,13 @@ import { usePathname } from "next/navigation"
 import ProfileMasthead from "./ProfileMasthead"
 import CharacterMasthead from "./CharacterMasthead"
 
-export default function DynamicMasthead({ handle, character }: { handle?: string, character?: string }) {
+export default function DynamicMasthead({
+  handle,
+  character
+}: {
+  handle?: string
+  character?: string
+}) {
   const isRouteCharacter = usePathname().includes("character/")
   return !isRouteCharacter ? (
     <ProfileMasthead handle={handle} />

apps/website/src/app/profile/[profile]/ProfileMasthead.tsx

@@ -4,16 +4,16 @@ import { useEffect, useRef } from "react"
 import Image from "next/image"
 import { Button } from "@/components/ui/Buttons"
 import {
-  AlertTriangleIcon,
-  BrushIcon,
-  CatIcon,
-  HeartIcon,
-  HomeIcon,
-  LayoutGridIcon,
-  MoreVerticalIcon,
-  StoreIcon,
-  UserPlusIcon
-} from "lucide-react"
+  LuAlertTriangle as AlertTriangleIcon,
+  LuBrush as BrushIcon,
+  LuCat as CatIcon,
+  LuHeart as HeartIcon,
+  LuHome as HomeIcon,
+  LuLayoutGrid as LayoutGridIcon,
+  LuMoreVertical as MoreVerticalIcon,
+  LuStore as StoreIcon,
+  LuUserPlus as UserPlusIcon
+} from "react-icons/lu"
 import { Tabs, SocialsRow, BuiImage } from "@/components/ui"
 import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
 import { useDetailPeekContext } from "@/context"

apps/website/src/app/profile/[profile]/character/[character]/(artworks)/layout.tsx

@@ -1,7 +1,6 @@
 import type { SlugRouteProps } from "@/types"
 import { MarginClamp } from "@/components/ui"
 
-
 export default function Layout({
   params,
   children

apps/website/src/app/welcome/CreateProfileForm.tsx

@@ -3,9 +3,10 @@
 import { useState } from "react"
 import Link from "next/link"
 
-import type { IconName } from "@fortawesome/fontawesome-svg-core"
-import { CreditCardIcon, LockIcon } from "lucide-react"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import {
+  LuCreditCard as CreditCardIcon,
+  LuLock as LockIcon
+} from "react-icons/lu"
 import { Fieldset, Note, Separator } from "@/components/ui"
 import { Button } from "@/components/ui/Buttons"
 import { FormWithProgress, InputField } from "@/components/ui/Forms"
@@ -40,33 +41,6 @@ export default function CreateProfileForm() {
     }
   ]
 
-  // TODO export these lil shits into their own component like lucide icons
-  const socialIcons: IconName[] = [
-    "youtube",
-    "facebook",
-    "x-twitter",
-    "instagram",
-    "twitch",
-    "tiktok",
-    "github",
-    "telegram",
-    "discord",
-    "reddit",
-    "tumblr",
-    "threads",
-    "deviantart",
-    "artstation",
-    "soundcloud",
-    "spotify",
-    "itunes-note",
-    "patreon",
-    "bandcamp",
-    "xbox",
-    "steam",
-    "battle-net",
-    "dribbble"
-  ]
-
   return (
     <>
       <section
@@ -124,7 +98,7 @@ export default function CreateProfileForm() {
             }
           >
             <Fieldset.Inner>
-              <div className="flex flex-wrap gap-2">
+              {/* <div className="flex flex-wrap gap-2">
                 {socialIcons.map((icon, i) => (
                   <Button
                     key={i}
@@ -138,7 +112,7 @@ export default function CreateProfileForm() {
                     }
                   ></Button>
                 ))}
-              </div>
+              </div> */}
               <Separator dir="horizontal" padding="0.75rem" />
               <Note type="info" inline>
                 {"Any platforms missing or have a suggestions to add? "}
@@ -158,26 +132,10 @@ export default function CreateProfileForm() {
                 <Button prefixIcon={<CreditCardIcon size={21} />}>
                   Credit/Debit card
                 </Button>
-                <Button
-                  prefixIcon={
-                    <FontAwesomeIcon
-                      icon={["fab", "paypal"]}
-                      fixedWidth
-                      size="lg"
-                    />
-                  }
-                >
+                <Button prefixIcon={<CreditCardIcon size={21} />}>
                   PayPal
                 </Button>
-                <Button
-                  prefixIcon={
-                    <FontAwesomeIcon
-                      icon={["fab", "stripe-s"]}
-                      fixedWidth
-                      size="lg"
-                    />
-                  }
-                >
+                <Button prefixIcon={<CreditCardIcon size={21} />}>
                   Stripe
                 </Button>
                 <Button prefixIcon={<CreditCardIcon size={21} />}>

apps/website/src/components/base/Footer.tsx

@@ -6,7 +6,7 @@ import project from "../../../package.json"
 import { kebabCase } from "lodash"
 import { MyFursona } from "../icons"
 import { BuiLink } from "../ui"
-import { HeartIcon } from "lucide-react"
+import { LuHeart as HeartIcon } from "react-icons/lu"
 import FooterGradient from "./FooterGraphics"
 
 const version = project.version