/* ============================================================
   COMMONS — line icon set (stroke, 24x24 viewbox)
   ============================================================ */
const ICON_PATHS = {
  compass: "M12 21a9 9 0 100-18 9 9 0 000 18zM16.2 7.8l-2 5.2-5.2 2 2-5.2 5.2-2z",
  chat: "M21 12a8 8 0 01-11.5 7.2L4 20l1-4.5A8 8 0 1121 12z",
  book: "M4 5.5A2.5 2.5 0 016.5 3H20v16H6.5A2.5 2.5 0 004 21.5V5.5zM20 19H6.5A2.5 2.5 0 004 21.5",
  search: "M11 19a8 8 0 100-16 8 8 0 000 16zM21 21l-4.3-4.3",
  pin: "M12 21s-7-5.2-7-11a7 7 0 1114 0c0 5.8-7 11-7 11zM12 12.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z",
  calendar: "M7 3v3M17 3v3M4 8h16M5 6h14a1 1 0 011 1v12a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1z",
  clock: "M12 21a9 9 0 100-18 9 9 0 000 18zM12 7.5V12l3 2",
  bolt: "M13 3L4 14h7l-1 7 9-11h-7l1-7z",
  heart: "M12 20s-7-4.5-9.2-9C1.3 8.2 2.7 5 6 5c2 0 3.2 1.3 4 2.5C10.8 6.3 12 5 14 5c3.3 0 4.7 3.2 3.2 6-2.2 4.5-9.2 9-9.2 9z",
  arrowUp: "M12 19V5M6 11l6-6 6 6",
  arrowRight: "M5 12h14M13 6l6 6-6 6",
  arrowLeft: "M19 12H5M11 6l-6 6 6 6",
  plus: "M12 5v14M5 12h14",
  share: "M16 6l-4-4-4 4M12 2v13M5 12v6a2 2 0 002 2h10a2 2 0 002-2v-6",
  bookmark: "M6 4h12a1 1 0 011 1v16l-7-4-7 4V5a1 1 0 011-1z",
  users: "M16 19v-1.5a3.5 3.5 0 00-3.5-3.5h-5A3.5 3.5 0 004 17.5V19M9.5 11a3.5 3.5 0 100-7 3.5 3.5 0 000 7zM20 19v-1.5a3.5 3.5 0 00-2.6-3.4M15.5 4.2a3.5 3.5 0 010 6.8",
  comment: "M21 11.5a7.5 7.5 0 01-10.9 6.7L4 20l1.8-5.1A7.5 7.5 0 1121 11.5z",
  flame: "M12 22c4 0 6.5-2.7 6.5-6 0-2.4-1.3-4-2.5-5.5-.4 1.4-1.3 2-2 2.2.4-2.6-1-5.4-3.5-7.2.3 3-1.3 4.3-2.5 5.6C6.6 8.6 5.5 10.3 5.5 13c0 3.3 2.5 9 6.5 9z",
  globe: "M12 21a9 9 0 100-18 9 9 0 000 18zM3.5 9h17M3.5 15h17M12 3c-2.5 2.4-3.8 5.5-3.8 9s1.3 6.6 3.8 9c2.5-2.4 3.8-5.5 3.8-9S14.5 5.4 12 3z",
  sliders: "M4 6h10M18 6h2M4 12h2M10 12h10M4 18h12M20 18h0M14 4v4M6 10v4M16 16v4",
  check: "M5 12.5l4.5 4.5L19 7",
  x: "M6 6l12 12M18 6L6 18",
  menu: "M4 7h16M4 12h16M4 17h16",
  ticket: "M4 8a2 2 0 012-2h12a2 2 0 012 2 2 2 0 000 4 2 2 0 010 4H6a2 2 0 01-2-2 2 2 0 000-4 2 2 0 010-4zM13 6v12",
  star: "M12 3l2.6 5.6L20.5 9l-4.3 4 1 6-5.2-2.9L6.8 19l1-6L3.5 9l5.9-.4L12 3z",
  bell: "M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 01-3.4 0",
  camera: "M4 8a2 2 0 012-2h2l1.5-2h5L16 6h2a2 2 0 012 2v9a2 2 0 01-2 2H6a2 2 0 01-2-2V8zM12 16.5a3.5 3.5 0 100-7 3.5 3.5 0 000 7z",
  lock: "M7 11V8a5 5 0 0110 0v3M5 11h14a1 1 0 011 1v8a1 1 0 01-1 1H5a1 1 0 01-1-1v-8a1 1 0 011-1z",
  edit: "M4 20h4L18.5 9.5a2.1 2.1 0 00-3-3L5 17v3zM13.5 6.5l3 3",
  eye: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7zM12 15a3 3 0 100-6 3 3 0 000 6z",
  dollar: "M12 3v18M16 7.5a3.5 3.5 0 00-3.5-2.5h-1a3 3 0 000 6h1a3 3 0 010 6h-1A3.5 3.5 0 018 16.5",
};

function Icon({ name, className = "", style = {}, size }) {
  const d = ICON_PATHS[name] || "";
  const s = size ? { width: size, height: size } : {};
  return (
    <svg className={"icon " + className} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"
      style={{ ...s, ...style }} aria-hidden="true">
      {d.split("M").filter(Boolean).map((seg, i) => <path key={i} d={"M" + seg} />)}
    </svg>
  );
}

window.Icon = Icon;
window.ICON_PATHS = ICON_PATHS;