update setting sidebar icons

components/SettingsSidebar.tsx

@@ -1,15 +1,8 @@
 import useCollectionStore from "@/store/collections";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faUser,
-  faPalette,
-  faBoxArchive,
-  faKey,
-  faLock,
-} from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   faCircleQuestion,
   faCreditCard,
@@ -48,7 +41,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon icon={faUser} className="w-7 h-7 text-primary" />
+            <i
+              className="bi-person text-primary text-2xl"
+            ></i>
 
             <p className="truncate w-full pr-7">Account</p>
           </div>
@@ -62,10 +57,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faPalette}
+              className="bi-palette text-primary text-2xl"
-              className="w-7 h-7 text-primary"
+            ></i>
-            />
 
             <p className="truncate w-full pr-7">Appearance</p>
           </div>
@@ -79,11 +73,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faBoxArchive}
+              className="bi-archive text-primary text-2xl"
-              className="w-7 h-7 text-primary"
+            ></i>
-            />
-
             <p className="truncate w-full pr-7">Archive</p>
           </div>
         </Link>
@@ -96,8 +88,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon icon={faKey} className="w-7 h-7 text-primary" />
+            <i
-
+              className="bi-key text-primary text-2xl"
+            ></i>
             <p className="truncate w-full pr-7">API Keys</p>
           </div>
         </Link>
@@ -110,8 +103,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon icon={faLock} className="w-7 h-7 text-primary" />
+            <i
-
+              className="bi-lock text-primary text-2xl"
+            ></i>
             <p className="truncate w-full pr-7">Password</p>
           </div>
         </Link>
@@ -125,11 +119,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                   : "hover:bg-neutral/20"
               } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
             >
-              <FontAwesomeIcon
+              <i
-                icon={faCreditCard}
+                className="bi-credit-card text-primary text-xl"
-                className="w-7 h-7 text-primary"
+              ></i>
-              />
-
               <p className="truncate w-full pr-7">Billing</p>
             </div>
           </Link>
@@ -148,10 +140,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faCircleQuestion as any}
+              className="bi-question-circle text-primary text-xl"
-              className="w-6 h-6 text-primary"
+            ></i>
-            />
 
             <p className="truncate w-full pr-7">Help</p>
           </div>
@@ -161,11 +152,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faGithub as any}
+              className="bi-github text-primary text-xl"
-              className="w-6 h-6 text-primary"
+            ></i>
-            />
-
             <p className="truncate w-full pr-7">GitHub</p>
           </div>
         </Link>
@@ -174,11 +163,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faXTwitter as any}
+              className="bi-twitter-x text-primary text-xl"
-              className="w-6 h-6 text-primary"
+            ></i>
-            />
-
             <p className="truncate w-full pr-7">Twitter</p>
           </div>
         </Link>
@@ -187,11 +174,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faMastodon as any}
+              className="bi-mastodon text-primary text-xl"
-              className="w-6 h-6 text-primary"
+            ></i>
-            />
-
             <p className="truncate w-full pr-7">Mastodon</p>
           </div>
         </Link>