replace fontawesome icons with ionicons 5

app/settings/components/settings-layout.tsx

@@ -1,7 +1,6 @@
 import type { FunctionComponent } from "react";
 import { useRouter } from "blitz";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft } from "@fortawesome/pro-regular-svg-icons";
+import { IoChevronBack } from "react-icons/io5";
 
 import Layout from "../../core/layouts/layout";
 
@@ -15,7 +14,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
 			<header className="px-4 sm:px-6 md:px-0">
 				<header className="flex">
 					<span className="flex items-center cursor-pointer" onClick={router.back}>
-						<FontAwesomeIcon className="h-8 w-8 mr-2" icon={faChevronLeft} /> Back
+						<IoChevronBack className="h-8 w-8 mr-2" /> Back
 					</span>
 				</header>
 			</header>

app/settings/pages/settings.tsx

@@ -1,7 +1,6 @@
 import type { BlitzPage } from "blitz";
 import { Routes, useMutation } from "blitz";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCreditCard, faUserCircle } from "@fortawesome/pro-regular-svg-icons";
+import { IoCardOutline, IoPersonCircleOutline } from "react-icons/io5";
 
 import Layout from "../../core/layouts/layout";
 
@@ -16,12 +15,12 @@ const navigation = [
 	{
 		name: "Account",
 		href: "/settings/account",
-		icon: ({ className = "w-8 h-8" }) => <FontAwesomeIcon size="lg" className={className} icon={faUserCircle} />,
+		icon: ({ className = "w-8 h-8" }) => <IoPersonCircleOutline className={className} />,
 	},
 	{
 		name: "Billing",
 		href: "/settings/billing",
-		icon: ({ className = "w-8 h-8" }) => <FontAwesomeIcon size="lg" className={className} icon={faCreditCard} />,
+		icon: ({ className = "w-8 h-8" }) => <IoCardOutline className={className} />,
 	},
 ];
 /* eslint-enable react/display-name */

app/settings/pages/settings/account.tsx

@@ -12,23 +12,21 @@ const Account: BlitzPage = () => {
 	useRequireOnboarding();
 
 	return (
-		<SettingsLayout>
-			<div className="flex flex-col space-y-6 p-6">
-				<ProfileInformations />
+		<div className="flex flex-col space-y-6 p-6">
+			<ProfileInformations />
 
-				<div className="hidden lg:block">
-					<Divider />
-				</div>
-
-				<UpdatePassword />
-
-				<div className="hidden lg:block">
-					<Divider />
-				</div>
-
-				<DangerZone />
+			<div className="hidden lg:block">
+				<Divider />
 			</div>
-		</SettingsLayout>
+
+			<UpdatePassword />
+
+			<div className="hidden lg:block">
+				<Divider />
+			</div>
+
+			<DangerZone />
+		</div>
 	);
 };
 

app/settings/pages/settings/billing.tsx

@@ -1,7 +1,6 @@
 /* TODO
 import type { FunctionComponent, MouseEventHandler } from "react";
 import type { BlitzPage } from "blitz";
-import { ExternalLinkIcon } from "@heroicons/react/outline";
 
 import SettingsLayout from "../../components/settings/settings-layout";
 import SettingsSection from "../../components/settings/settings-section";