feat(favicon): add favicon component to handle theme-based icons

Author: tyronejosee

public/icon-dark.svg

@@ -0,0 +1,25 @@
+"use client";
+
+import { useEffect } from "react";
+import { useTheme } from "next-themes";
+
+export default function Favicon() {
+  const { resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    const favicon =
+      document.querySelector("link[rel*='icon']") ||
+      document.createElement("link");
+    favicon.setAttribute("rel", "icon");
+
+    if (resolvedTheme === "dark") {
+      favicon.setAttribute("href", "/icon-dark.svg");
+    } else {
+      favicon.setAttribute("href", "/icon-light.svg");
+    }
+
+    document.head.appendChild(favicon);
+  }, [resolvedTheme]);
+
+  return null;
+}

src/app/icon.svg renamed to public/icon-light.svg

@@ -2,6 +2,7 @@
 
 import { HeroUIProvider, ToastProvider } from "@heroui/react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
+import Favicon from "./favicon";
 
 type Props = {
   children: React.ReactNode;
@@ -22,6 +23,7 @@ export default function Providers({ children }: Props) {
         }}
       />
       <NextThemesProvider attribute="class" defaultTheme="system" enableSystem>
+        <Favicon />
         {children}
       </NextThemesProvider>
     </HeroUIProvider>