TTikotok V4

greenlns-landing/components/seo/SeoIcon.tsx

@@ -0,0 +1,67 @@
+/** 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>
+  )
+}