/* Single-stroke inline SVGs, 1.5px, rounded joins. */
const IconBase = ({ children, size = 22, className = '' }) => (
  <svg
    width={size} height={size} viewBox="0 0 24 24"
    fill="none" stroke="currentColor" strokeWidth="1.5"
    strokeLinecap="round" strokeLinejoin="round"
    className={className} aria-hidden="true"
  >
    {children}
  </svg>
);

const Icon = {
  Phone: (p) => <IconBase {...p}><path d="M5 4h3l2 5-2 1a12 12 0 0 0 6 6l1-2 5 2v3a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2Z"/></IconBase>,
  Globe: (p) => <IconBase {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3.5 3 14 0 18M12 3c-3 3.5-3 14 0 18"/></IconBase>,
  Route: (p) => <IconBase {...p}><circle cx="5" cy="6" r="2"/><circle cx="19" cy="18" r="2"/><path d="M7 6h6a4 4 0 0 1 4 4v0a4 4 0 0 1-4 4H11a4 4 0 0 0-4 4"/></IconBase>,
  Shield: (p) => <IconBase {...p}><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3Z"/><path d="m9 12 2 2 4-4"/></IconBase>,
  Recover: (p) => <IconBase {...p}><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></IconBase>,
  Filter: (p) => <IconBase {...p}><path d="M3 5h18l-7 9v5l-4-2v-3L3 5Z"/></IconBase>,
  Chart: (p) => <IconBase {...p}><path d="M3 20h18"/><path d="M6 20V10M11 20V4M16 20v-7M21 20v-4"/></IconBase>,
  Sync: (p) => <IconBase {...p}><path d="M4 7h11a5 5 0 0 1 5 5"/><path d="m12 3 3 4-3 4"/><path d="M20 17H9a5 5 0 0 1-5-5"/><path d="m12 21-3-4 3-4"/></IconBase>,
  Lock: (p) => <IconBase {...p}><rect x="4" y="11" width="16" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></IconBase>,
  Arrow: (p) => <IconBase {...p}><path d="M5 12h14M13 6l6 6-6 6"/></IconBase>,
  Plus: (p) => <IconBase {...p}><path d="M12 5v14M5 12h14"/></IconBase>,
  Check: (p) => <IconBase {...p}><path d="m5 12 5 5 9-11"/></IconBase>,
  Key: (p) => <IconBase {...p}><circle cx="8" cy="15" r="4"/><path d="m11 12 9-9 1 3-2 2 2 2-2 2-2-2-2 2"/></IconBase>,
  Server: (p) => <IconBase {...p}><rect x="3" y="4" width="18" height="7" rx="2"/><rect x="3" y="13" width="18" height="7" rx="2"/><circle cx="7" cy="7.5" r="0.5" fill="currentColor"/><circle cx="7" cy="16.5" r="0.5" fill="currentColor"/></IconBase>,
  Clock: (p) => <IconBase {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></IconBase>,
  Spark: (p) => <IconBase {...p}><path d="M12 3v5M12 16v5M3 12h5M16 12h5M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3"/></IconBase>,
  Mail: (p) => <IconBase {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></IconBase>,
  Circle: (p) => <IconBase {...p}><circle cx="12" cy="12" r="4"/></IconBase>,
};

window.Icon = Icon;
