load all icons with tree-shaking

components/Navbar.tsx

@@ -1,4 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconName } from '@fortawesome/fontawesome-svg-core'
 import { Dialog, Transition } from '@headlessui/react'
 import toast, { Toaster } from 'react-hot-toast'
 
@@ -40,39 +41,34 @@ const Navbar = () => {
   }
 
   return (
-    <div className="text-left py-1 bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 border-b border-gray-900/10 backdrop-blur-md z-[100]">
+    <div className="bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 border-b border-gray-900/10 backdrop-blur-md z-[100]">
-      <div className="flex items-center justify-between w-full max-w-5xl mx-auto px-2">
+      <Toaster />
-        <Toaster />
 
+      <div className="flex items-center justify-between w-full max-w-5xl mx-auto pr-4 py-1">
         <Link href="/">
           <a className="dark:text-white hover:opacity-80 flex items-center p-2 space-x-2">
             <Image src={siteConfig.icon} alt="icon" width="28" height="28" />
-            <span className="sm:block hidden text-xl font-bold">{siteConfig.title}</span>
+            <span className="sm:block hidden text-lg font-bold">{siteConfig.title}</span>
           </a>
         </Link>
 
-        <div className="flex items-center text-gray-700">
+        <div className="flex items-center space-x-4 text-gray-700">
-          <a
+          {siteConfig.links.map(l => (
-            href={siteConfig.contact.github}
+            <a
-            target="_blank"
+              key={l.name}
-            rel="noopener noreferrer"
+              href={l.link}
-            className="hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 p-2 rounded"
+              target="_blank"
-          >
+              rel="noopener noreferrer"
-            <FontAwesomeIcon icon={['fab', 'github']} size="lg" />
+              className="flex items-center space-x-2 dark:text-white hover:opacity-80"
-          </a>
+            >
-          <a
+              <FontAwesomeIcon icon={['fab', l.name.toLowerCase() as IconName]} />
-            href={siteConfig.contact.telegram}
+              <span className="text-sm hidden md:inline-block">{l.name}</span>
-            target="_blank"
+            </a>
-            rel="noopener noreferrer"
+          ))}
-            className="hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 p-2 rounded"
+
-          >
+          <a href={siteConfig.email} className="flex items-center space-x-2 dark:text-white hover:opacity-80">
-            <FontAwesomeIcon icon={['fab', 'telegram-plane']} size="lg" />
+            <FontAwesomeIcon icon={['far', 'envelope']} />
-          </a>
+            <span className="text-sm hidden md:inline-block">Email</span>
-          <a
-            href={siteConfig.contact.email}
-            className="hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 p-2 rounded"
-          >
-            <FontAwesomeIcon icon={['far', 'envelope']} size="lg" />
           </a>
 
           {tokenPresent && (

config/site.json

@@ -1,20 +1,26 @@
 {
   "icon": "/icons/128.png",
-  "title": "spencer's onedrive index",
+  "title": "Spencer's OneDrive",
   "maxItems": 100,
-  "googleFontSans": "Overpass",
+  "googleFontSans": "Inter",
-  "googleFontMono": "Overpass Mono",
+  "googleFontMono": "Fira Mono",
   "googleFontLinks": [
-    "https://fonts.googleapis.com/css2?family=Overpass+Mono&family=Overpass:wght@400;700&display=swap"
+    "https://fonts.googleapis.com/css2?family=Fira+Mono&family=Inter:wght@400;700&display=swap"
   ],
   "footer": "Powered by <a href=\"https://github.com/spencerwooo/onedrive-vercel-index\" target=\"_blank\" rel=\"noopener noreferrer\">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo.",
   "protectedRoutes": [
     "/🌞 Private folder/u-need-a-password",
     "/🥟 Some test files/Protected route"
   ],
-  "contact": {
+  "email": "mailto:spencer.wushangbo@gmail.com",
-    "email": "mailto:spencer.wushangbo@gmail.com",
+  "links": [
-    "telegram": "https://t.me/realSpencerWoo",
+    {
-    "github": "https://github.com/spencerwooo/onedrive-vercel-index"
+      "name": "GitHub",
-  }
+      "link": "https://github.com/spencerwooo/onedrive-vercel-index"
+    },
+    {
+      "name": "Telegram",
+      "link": "https://t.me/realSpencerWoo"
+    }
+  ]
 }

pages/_app.tsx

@@ -37,11 +37,16 @@ import {
   faCloud,
   faChevronCircleDown,
 } from '@fortawesome/free-solid-svg-icons'
-import { faGithub, faMarkdown, faTelegramPlane } from '@fortawesome/free-brands-svg-icons'
+import * as Icons from '@fortawesome/free-brands-svg-icons'
 
 import type { AppProps } from 'next/app'
 import NextNProgress from 'nextjs-progressbar'
 
+// import all brand icons with tree-shaking so all icons can be referenced in the app
+const iconList = Object.keys(Icons)
+  .filter(k => k !== 'fab' && k !== 'prefix')
+  .map(icon => Icons[icon])
+
 library.add(
   faFileImage,
   faFilePdf,
@@ -55,8 +60,6 @@ library.add(
   faFileAlt,
   faFile,
   faFolder,
-  faGithub,
-  faMarkdown,
   faMusic,
   faArrowLeft,
   faArrowRight,
@@ -74,8 +77,8 @@ library.add(
   faSignOutAlt,
   faEnvelope,
   faCloud,
-  faTelegramPlane,
+  faChevronCircleDown,
-  faChevronCircleDown
+  ...iconList,
 )
 
 function MyApp({ Component, pageProps }: AppProps) {