const SvgIcon = ({ children, className = "h-6 w-6", fill = "none" }) => (
  <svg aria-hidden="true" viewBox="0 0 24 24" className={className} fill={fill} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{children}</svg>
);

const ArrowUpRight = ({ className = "h-5 w-5" }) => <SvgIcon className={className}><path d="M7 17L17 7"/><path d="M7 7h10v10"/></SvgIcon>;
const Play = ({ className = "h-4 w-4" }) => <svg aria-hidden="true" viewBox="0 0 24 24" className={className} fill="currentColor"><polygon points="6 4 20 12 6 20 6 4"/></svg>;
const Clock = () => <SvgIcon className="h-7 w-7"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></SvgIcon>;
const Globe = () => <SvgIcon className="h-7 w-7"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14.5 14.5 0 0 1 0 18M12 3a14.5 14.5 0 0 0 0 18"/></SvgIcon>;

const MaterialIcon = ({ path }) => <svg aria-hidden="true" viewBox="0 0 24 24" className="h-6 w-6 text-white" fill="currentColor"><path d={path}/></svg>;

window.ArrowUpRight = ArrowUpRight;
window.Play = Play;
window.Clock = Clock;
window.Globe = Globe;
window.MaterialIcon = MaterialIcon;