68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
/** Inline-SVG-Icons (ersetzen die Material-Symbols-Font des Design-Exports). */
|
|
|
|
export type SeoIconName =
|
|
| 'check_circle'
|
|
| 'calendar'
|
|
| 'healing'
|
|
| 'sun'
|
|
| 'psychology'
|
|
| 'menu'
|
|
| 'close'
|
|
|
|
const paths: Record<SeoIconName, React.ReactNode> = {
|
|
check_circle: (
|
|
<>
|
|
<circle cx="12" cy="12" r="9" />
|
|
<path d="m9 12 2 2 4-4" />
|
|
</>
|
|
),
|
|
calendar: (
|
|
<>
|
|
<rect x="3" y="5" width="18" height="16" rx="2" />
|
|
<path d="M8 3v4M16 3v4M3 10h18" />
|
|
</>
|
|
),
|
|
healing: (
|
|
<>
|
|
<path d="M12 3v18M3 12h18" transform="rotate(45 12 12)" />
|
|
<path d="M8.5 8.5h.01M15.5 15.5h.01" />
|
|
</>
|
|
),
|
|
sun: (
|
|
<>
|
|
<circle cx="12" cy="12" r="4" />
|
|
<path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
|
|
</>
|
|
),
|
|
psychology: (
|
|
<>
|
|
<path d="M12 4a7 7 0 0 1 7 7c0 2.4-1.2 4.5-3 5.7V20h-6v-2h-2a2 2 0 0 1-2-2v-2H4l1.6-2.7A7 7 0 0 1 12 4Z" />
|
|
<circle cx="12" cy="11" r="2.2" />
|
|
</>
|
|
),
|
|
menu: <path d="M4 6h16M4 12h16M4 18h16" />,
|
|
close: <path d="M6 6l12 12M18 6L6 18" />,
|
|
}
|
|
|
|
interface SeoIconProps {
|
|
name: SeoIconName
|
|
className?: string
|
|
}
|
|
|
|
export default function SeoIcon({ name, className = 'w-6 h-6' }: SeoIconProps) {
|
|
return (
|
|
<svg
|
|
className={className}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.8"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
{paths[name]}
|
|
</svg>
|
|
)
|
|
}
|