STAMMBAUM-FULLDATE: GerbilIcon-SVG + Gencode-Chip + Gerbil-Icon ersetzt 🐭 app-weit

gerbil-manager-web/src/components/AppShell.tsx

@@ -1,19 +1,21 @@
 import { useState } from 'react'
+import type { ReactNode } from 'react'
 import { NavLink, Outlet } from 'react-router-dom'
 import { de } from '../strings/de'
+import GerbilIcon from './GerbilIcon'
 import './appShell.css'
 
 interface NavItem {
   to: string
   label: string
-  icon: string
+  icon: ReactNode
   end?: boolean
 }
 
 // Primary items are always visible in the phone bottom bar; secondary items
 // move into the "Mehr" sheet on phones and appear inline in the desktop sidebar.
 const PRIMARY: NavItem[] = [
-  { to: '/rennmaeuse', label: de.nav.gerbils, icon: '🐭' },
+  { to: '/rennmaeuse', label: de.nav.gerbils, icon: <GerbilIcon size="1.25em" /> },
   { to: '/wuerfe', label: de.nav.litters, icon: '🍼' },
   { to: '/genetik', label: de.nav.genetics, icon: '🧬' },
 ]
@@ -46,7 +48,7 @@ export default function AppShell() {
   return (
     <div className="app-shell">
       <header className="app-header">
-        <span className="app-logo" aria-hidden="true">🐭</span>
+        <span className="app-logo" aria-hidden="true"><GerbilIcon size="1.5rem" /></span>
         <h1 className="app-title">{de.app.title}</h1>
       </header>
 

gerbil-manager-web/src/components/GerbilIcon.tsx

@@ -0,0 +1,35 @@
+import type { CSSProperties } from 'react'
+
+interface Props {
+  size?: string | number
+  style?: CSSProperties
+  className?: string
+}
+
+/** Reusable gerbil silhouette icon — upright sitting pose, long tail with tuft. fill=currentColor. */
+export default function GerbilIcon({ size = '1em', style, className }: Props) {
+  return (
+    <svg
+      viewBox="0 0 64 64"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      style={{ display: 'inline-block', verticalAlign: '-0.125em', flexShrink: 0, ...style }}
+      className={className}
+      role="img"
+      aria-label="Rennmaus"
+    >
+      {/* body — sitting upright */}
+      <path d="M40 14c6 0 11 5 11 12 0 4-2 7-2 11 0 10-6 16-15 16-8 0-14-6-14-15 0-13 9-24 20-24z" />
+      {/* ear */}
+      <circle cx="46" cy="15" r="5" />
+      {/* hind paw */}
+      <ellipse cx="24" cy="52" rx="9" ry="3.5" />
+      {/* long curved tail with tuft */}
+      <path d="M16 51c-7 1-13-2-15-9-1-4 0-8 3-10 1 3 1 6 3 8 3 3 7 4 11 4z" />
+      {/* front paw */}
+      <path d="M30 45c3 0 5 1 5 4-3 1-6 1-7-2 0-1 1-2 2-2z" />
+    </svg>
+  )
+}