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

36 lines
1.1 KiB
TypeScript

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>
)
}