Fix favicon

Author: MartinBraquet

app/Header.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import Link from "next/link";
 import { signOut, useSession } from "next-auth/react";
 import ThemeToggle from "@/lib/client/theme";
-import {favIcon} from "@/lib/client/media";
+import FavIcon from "@/components/FavIcon";
 
 export default function Header() {
   const { data: session } = useSession();
@@ -37,7 +37,7 @@ export default function Header() {
           className="text-4xl font-bold hover:text-blue-600 transition-colors flex items-center"
           aria-label={isSmallScreen ? "Home" : "Compass"}
         >
-          {favIcon()}
+          <FavIcon className="dark:invert"/>
           {!isSmallScreen && (
             <span className="flex items-center gap-2">
               Compass

app/login/page.tsx

@@ -5,7 +5,7 @@ import {useRouter, useSearchParams} from "next/navigation";
 import {Suspense, useEffect, useState} from "react";
 import Link from "next/link";
 import {FcGoogle} from "react-icons/fc";
-import {favIcon} from "@/lib/client/media";
+import FavIcon from "@/components/FavIcon";
 
 export default function LoginPage() {
   return (
@@ -72,7 +72,7 @@ function RegisterComponent() {
       <div className="max-w-md w-full space-y-8">
         <div>
           <div className="flex justify-center mb-6">
-            {favIcon()}
+            <FavIcon className="dark:invert"/>
           </div>
           <h2 className="mt-6 text-center text-3xl font-extrabold ">
             Sign in to your account

app/register/page.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 import {signIn} from "next-auth/react";
 import {FcGoogle} from "react-icons/fc";
 import {useSearchParams} from "next/navigation";
-import {favIcon} from "@/lib/client/media";
+import FavIcon from "@/components/FavIcon";
 
 
 export default function RegisterPage() {
@@ -149,7 +149,7 @@ function RegisterComponent() {
               {/*  The project is still in development...*/}
               {/*</h2>*/}
               <div className="flex justify-center mb-6">
-                {favIcon()}
+                <FavIcon className="dark:invert"/>
               </div>
               <h2 className="text-center text-3xl font-extrabold ">
                 Get Started

components/FavIcon.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import Image from "next/image";
+
+type FavIconProps = React.SVGProps<SVGSVGElement>;
+
+const FavIcon: React.FC<FavIconProps> = ({ className }) => (
+  <Image src="/favicon.ico" alt="Compass logo" width={500} height={500} className={"w-12 h-12 " + className}/>
+);
+
+export default FavIcon;
+

lib/client/media.tsx

@@ -21,9 +21,4 @@ export async function parseImage(img: string, setImage: any, batch = false) {
       setImage(url);
     }
   }
-
 }
-
-export function favIcon() {
-  return <Image src="/favicon.ico" alt="Compass logo" width={500} height={500} className="w-12 h-12 dark:invert"/>
-}