remove fontawesome, reduce css payload

activatedgeek · Feb 22, 2024 · 817e452 · 817e452
1 parent 0039cad
commit 817e452
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 125 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,9 +17,6 @@
     "@astrojs/react": "^3.0.10",
     "@astrojs/rss": "^4.0.5",
     "@astrojs/sitemap": "^3.0.5",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "@picocss/pico": "^2.0.0",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
@@ -29,6 +26,7 @@
     "pagefind": "^1.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "rehype-external-links": "^3.0.0",
     "rehype-figure": "^1.0.1",
     "rehype-katex": "^7.0.0",

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,19 +1,15 @@
 ---
 import { getEntry } from "astro:content";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { SiGooglescholar, SiSemanticscholar } from "react-icons/si";
 import {
-  faUserGraduate,
-  faGraduationCap,
-  faArchive,
-  faRss,
-} from "@fortawesome/free-solid-svg-icons";
-import {
-  faGithub,
-  faLinkedin,
-  faStackOverflow,
-  faXTwitter,
-  faHackerNewsSquare,
-} from "@fortawesome/free-brands-svg-icons";
+  FaGithub,
+  FaHackerNews,
+  FaLinkedin,
+  FaStackOverflow,
+  FaRssSquare,
+  FaDatabase,
+} from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
 
 import { getSocialItem } from "@lib/collections";
 
@@ -64,71 +60,78 @@ const {
           href={(await getSocialItem("scholar")).url}
           target="_blank"
           rel="noopener noreferrer"
-          ><FontAwesomeIcon icon={faGraduationCap} color="#4d90fe" /></a
         >
+          <SiGooglescholar color="#4d90fe" />
+        </a>
       </li>
       <li>
         <a
           title="Semantic Scholar"
           href={(await getSocialItem("sscholar")).url}
           target="_blank"
           rel="noopener noreferrer"
-          ><FontAwesomeIcon icon={faUserGraduate} color="#f4d35e" /></a
         >
+          <SiSemanticscholar color="#f4d35e" />
+        </a>
       </li>
       <li>
         <a
           title="Github"
           href={(await getSocialItem("gh")).url}
           target="_blank"
           rel="noopener noreferrer"
-          ><FontAwesomeIcon icon={faGithub} color="#24292f" /></a
         >
+          <FaGithub color="#24292f" />
+        </a>
       </li>
       <li>
         <a
           title="Hacker News"
           href={(await getSocialItem("hn")).url}
           target="_blank"
           rel="noopener noreferrer"
-          ><FontAwesomeIcon icon={faHackerNewsSquare} color="#ff6600" /></a
         >
+          <FaHackerNews color="#ff6600" />
+        </a>
       </li>
       <li>
         <a
           title="LinkedIn"
           href={(await getSocialItem("lnkd")).url}
           target="_blank"
           rel="noopener noreferrer"
-          ><FontAwesomeIcon icon={faLinkedin} color="#0a66c2" /></a
         >
+          <FaLinkedin color="#0a66c2" />
+        </a>
       </li>
       <li>
         <a
           title="StackOverflow"
           href={(await getSocialItem("so")).url}
           target="_blank"
           rel="noopener noreferrer"
-          ><FontAwesomeIcon icon={faStackOverflow} color="#f48225" /></a
         >
+          <FaStackOverflow color="#f48225" />
+        </a>
       </li>
       <li>
         <a
           title="Twitter"
           href={(await getSocialItem("twtr")).url}
           target="_blank"
           rel="noopener noreferrer"
-          ><FontAwesomeIcon icon={faXTwitter} color="#0f1419" /></a
         >
+          <FaXTwitter color="#0f1419" />
+        </a>
       </li>
       <li>
-        <a title="RSS" href="/rss.xml">
-          <FontAwesomeIcon icon={faRss} color="#e26522" />
+        <a title="Archive" href="/archive">
+          <FaDatabase color="#959082" />
         </a>
       </li>
       <li>
-        <a title="Archive" href="/archive">
-          <FontAwesomeIcon icon={faArchive} color="#959082" />
+        <a title="RSS" href="/rss.xml">
+          <FaRssSquare color="#e26522" />
         </a>
       </li>
     </ul>

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,6 +1,6 @@
 ---
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBrain, faSearch } from "@fortawesome/free-solid-svg-icons";
+import { IoSearch } from "react-icons/io5";
+import { PiTreeBold } from "react-icons/pi";
 ---
 
 <style>
@@ -9,6 +9,16 @@ import { faBrain, faSearch } from "@fortawesome/free-solid-svg-icons";
     border-bottom: solid var(--pico-muted-border-color)
       calc(3 * var(--pico-border-width));
   }
+
+  a {
+    display: inline-flex;
+    vertical-align: middle;
+    align-items: center;
+
+    > span {
+      margin-left: calc(var(--pico-spacing) * 0.5);
+    }
+  }
 </style>
 
 <header data-pagefind-ignore>
@@ -22,14 +32,16 @@ import { faBrain, faSearch } from "@fortawesome/free-solid-svg-icons";
     </ul>
     <ul>
       <li>
-        <a title="Search" href="/search"
-          ><FontAwesomeIcon icon={faSearch} color="var(--pico-primary)" /> Search</a
-        >
+        <a title="Search" href="/search">
+          <IoSearch color="var(--pico-primary)" />
+          <span>Search</span>
+        </a>
       </li>
       <li>
-        <a title="Knowledge Base" href="/kb"
-          ><FontAwesomeIcon icon={faBrain} color="var(--pico-primary)" /> KB</a
-        >
+        <a title="Knowledge Base" href="/kb">
+          <PiTreeBold color="var(--pico-primary)" />
+          <span>KB</span>
+        </a>
       </li>
     </ul>
   </nav>

diff --git a/src/components/MDPage.astro b/src/components/MDPage.astro
@@ -1,6 +1,5 @@
 ---
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCalendarDay, faTag } from "@fortawesome/free-solid-svg-icons";
+import { FaCalendarDay, FaTag } from "react-icons/fa";
 
 import Html from "@components/Html.astro";
 import Date from "@components/Date.astro";
@@ -68,8 +67,7 @@ const { title, description, date, updated, area } = frontmatter;
           {
             updated || date ? (
               <>
-                <FontAwesomeIcon
-                  icon={faCalendarDay}
+                <FaCalendarDay
                   style={{
                     marginRight: "calc(0.25 * var(--pico-spacing))",
                   }}
@@ -82,8 +80,7 @@ const { title, description, date, updated, area } = frontmatter;
           }
         </div>
         <div>
-          <FontAwesomeIcon
-            icon={faTag}
+          <FaTag
             style={{
               marginRight: "calc(0.25 * var(--pico-spacing))",
             }}

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -1,7 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Assistant:[email protected]&display=swap");
 
 @import "@picocss/pico/css/pico.classless.min.css";
-@import "@fortawesome/fontawesome-svg-core/styles.css";
 
 :root {
   --pico-font-family-sans-serif: "Assistant", -apple-system, system-ui,