different icons package

package.json

@@ -12,27 +12,22 @@
   "dependencies": {
     "@fontsource/jetbrains-mono": "^4.5.12",
     "@fontsource/lato": "^4.5.10",
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "highlight.js": "^11.7.0",
     "normalize.css": "^8.0.1",
     "prism-themes": "^1.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
     "rehype-highlight": "^6.0.0"
   },
   "devDependencies": {
     "@bspeice/vite-plugin-blog": "^1.1.0",
-    "@mapbox/rehype-highlight-code-block": "^1.0.0",
     "@mdx-js/rollup": "^2.3.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@types/remark-prism": "^1.3.4",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "husky": "^8.0.0",
     "pretty-quick": "^3.1.3",
-    "remark-prism": "^1.3.6",
     "typescript": "^4.9.3",
     "vite": "^4.2.0"
   }

pages/LayoutBase.tsx

@@ -1,19 +1,33 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, StrictMode } from "react";
+import { IconContext } from "react-icons";
+import { FaHome, FaUser } from "react-icons/fa";
 
 import "./style.css";
 
 const Navbar: React.FC = () => (
   <span className="navbar">
-    <a href="/">Home</a>/<a href="/about">About</a>
+    <a href="/">
+      <FaHome />
+      Home
+    </a>
+    <span>/</span>
+    <a href="/about">
+      <FaUser />
+      About
+    </a>
   </span>
 );
 
 const Layout: React.FC<PropsWithChildren> = ({ children }) => (
-  <div className="gridOffset">
+  <StrictMode>
-    <Navbar />
+    <IconContext.Provider value={{ className: "icon" }}>
-    <hr />
+      <div className="gridOffset">
-    {children}
+        <Navbar />
-  </div>
+        <hr style={{ marginTop: "0" }} />
+        {children}
+      </div>
+    </IconContext.Provider>
+  </StrictMode>
 );
 
 export default Layout;

pages/style.css

@@ -113,16 +113,22 @@ a > code:hover {
 
 .navbar {
   text-align: right;
-  margin: 0.5em;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
 }
 
-.navbar * {
+.navbar :not(.icon) {
-  margin-left: 0.5em;
+  padding-left: 0.25em;
-  margin-right: 0.5em;
+  padding-right: 0.25em;
   text-decoration: none;
   border-bottom-style: none;
 }
 
-[class*="fa-"] {
+.icon {
-  margin-right: 0.5em;
+  vertical-align: middle;
+  margin-right: 0.3em;
+}
+
+.icon-post {
+  vertical-align: text-top;
 }

posts/LayoutBlog.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconContext } from "react-icons";
-import { faCalendar } from "@fortawesome/free-regular-svg-icons";
+import { FaCalendar } from "react-icons/fa";
 
 import Base from "../pages/LayoutBase";
 
@@ -22,7 +22,7 @@ export default function Layout({
       <h1>{title}</h1>
       <h3>{description}</h3>
       <h4>
-        <FontAwesomeIcon icon={faCalendar} />
+        <FaCalendar />
         {published}
       </h4>
       {updated && <p>Last updated: {updated}</p>}
@@ -31,9 +31,13 @@ export default function Layout({
 
   const withChildren: React.FC<PropsWithChildren> = ({ children }) => (
     <Base>
-      {header}
+      <IconContext.Provider
-      <div style={{ paddingTop: "2em" }} />
+        value={{ className: "icon icon-post", size: "1.2em" }}
-      {children}
+      >
+        {header}
+        <div style={{ paddingTop: "2em" }} />
+        {children}
+      </IconContext.Provider>
     </Base>
   );
   return withChildren;