Neues WEBklar-Logo, Favicon und Tab-Titel

src/components/Logo.tsx

@@ -0,0 +1,39 @@
+interface LogoProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+const Logo = ({ className, width = 30, height = 30 }: LogoProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 512 512"
+    className={className}
+    aria-hidden
+  >
+    {/* rounded square background */}
+    <rect x="48" y="48" width="416" height="416" rx="92" fill="#FFFFFF" />
+    {/* tilted oval */}
+    <ellipse cx="256" cy="256" rx="210" ry="150" fill="#111111" transform="rotate(-28 256 256)" />
+    {/* small dot */}
+    <circle cx="356" cy="172" r="18" fill="#FFFFFF" />
+    {/* enlarged sparkle star */}
+    <g transform="translate(256 256) rotate(-28)">
+      <path
+        d="
+          M 0,-170
+          C 22,-105 60,-72 120,-56
+          C 60,-40 22,-8 0,64
+          C -22,-8 -60,-40 -120,-56
+          C -60,-72 -22,-105 0,-170
+          Z
+        "
+        fill="#FFFFFF"
+      />
+    </g>
+  </svg>
+);
+
+export default Logo;