use svg logo

components/header.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import Link from 'next/link'
-import Image from 'next/image'
 import UserContext from './user/context'
+import Logo from './logo'
 
 export default function Header({ label = 'Pfadi Bussle' }: { label?: string }) {
   const { username, role } = useContext(UserContext)
@@ -11,12 +11,7 @@ export default function Header({ label = 'Pfadi Bussle' }: { label?: string }) {
         <h1 className="mr-3 flex-grow text-3xl">
           <Link href="/">{label}</Link>
         </h1>
-        <Image
-          src="/logo.webp"
-          alt="Logo Freundeskreis VCP Rosenfeld"
-          width="160"
-          height="44"
-        />
+        <Logo />
       </div>
       {username && (
         <div className="info-message">