// Line icons, 24x24, drawn with currentColor.
const P = {
  x: '<path d="M4 4l16 16M20 4L4 20" />',
  xlogo: '<path d="M4 4h4.5l11.5 16h-4.5zM19.5 4L13.4 11M4.5 20l6.1-7" />',
  globe: '<circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.6 2.6 3.6 5.4 3.6 8.5s-1 5.9-3.6 8.5c-2.6-2.6-3.6-5.4-3.6-8.5s1-5.9 3.6-8.5z"/>',
  tg: '<path d="M20.5 4.5L3.6 11.1c-.8.3-.7 1.4.1 1.6l4.3 1.2 1.6 5c.2.7 1.1.9 1.6.3l2.4-2.5 4.5 3.3c.6.4 1.4.1 1.6-.6l2.9-12.6c.2-.9-.6-1.6-1.4-1.3z"/><path d="M8 13.9l9-6.4"/>',
  search: '<circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/>',
  copy: '<rect x="8.5" y="8.5" width="11" height="11" rx="2"/><path d="M15.5 8.5V6a1.5 1.5 0 0 0-1.5-1.5H6A1.5 1.5 0 0 0 4.5 6v8A1.5 1.5 0 0 0 6 15.5h2.5"/>',
  bolt: '<path d="M13 3L5 13.5h6L10 21l8-10.5h-6z"/>',
  user: '<circle cx="12" cy="8.5" r="3.5"/><path d="M5 20c.8-3.6 3.6-5.5 7-5.5s6.2 1.9 7 5.5"/>',
  users: '<circle cx="9" cy="9" r="3.2"/><path d="M3 19.5c.6-3.2 3-5 6-5s5.4 1.8 6 5"/><path d="M15.5 6.2a3.2 3.2 0 0 1 0 6M17.5 14.8c1.8.6 3 2.2 3.5 4.7"/>',
  crown: '<path d="M4 17.5h16M4.5 15L3.5 7l5 3.5L12 5l3.5 5.5 5-3.5-1 8z"/>',
  chef: '<path d="M7.5 14.5V19h9v-4.5"/><path d="M7.5 14.5a4 4 0 0 1-1.2-7.8 4.5 4.5 0 0 1 8.4-1.4 3.9 3.9 0 0 1 3 7c-.6.9-1.5 1.6-2.2 2.2"/>',
  target: '<circle cx="12" cy="12" r="7.5"/><circle cx="12" cy="12" r="2.5"/><path d="M12 2.5v4M12 17.5v4M2.5 12h4M17.5 12h4"/>',
  boxes: '<path d="M4 8.5l8-4 8 4-8 4z"/><path d="M4 8.5v7l8 4 8-4v-7M12 12.5v7"/>',
  gear: '<circle cx="12" cy="12" r="3"/><path d="M19.4 13.5l1.6 1.2-2 3.4-1.9-.7a7.4 7.4 0 0 1-2.3 1.3l-.3 2h-4l-.3-2a7.4 7.4 0 0 1-2.3-1.3l-1.9.7-2-3.4 1.6-1.2a7.6 7.6 0 0 1 0-2.9L3 9.4l2-3.4 1.9.7a7.4 7.4 0 0 1 2.3-1.3l.3-2h4l.3 2a7.4 7.4 0 0 1 2.3 1.3l1.9-.7 2 3.4-1.6 1.2a7.6 7.6 0 0 1 0 2.9z"/>',
  eyeoff: '<path d="M3.5 3.5l17 17M10 5.3c.6-.1 1.3-.2 2-.2 5 0 8.5 4.5 9.5 6.9-.5 1.1-1.4 2.6-2.8 3.9M6.4 6.5C4.4 7.9 3.1 10 2.5 12c1 2.4 4.5 6.9 9.5 6.9 1.6 0 3-.4 4.3-1.1"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/>',
  filter: '<path d="M4 5.5h16l-6.2 7.3v5.4l-3.6 1.8v-7.2z"/>',
  pause: '<rect x="6.5" y="5" width="3.5" height="14" rx="1"/><rect x="14" y="5" width="3.5" height="14" rx="1"/>',
  wallet: '<path d="M4 7.5A2.5 2.5 0 0 1 6.5 5H18v3"/><rect x="4" y="7.5" width="16.5" height="11.5" rx="2.5"/><circle cx="16" cy="13.2" r="1.2"/>',
  plus: '<path d="M12 5v14M5 12h14"/>',
  trash: '<path d="M4.5 7h15M9.5 7V4.5h5V7M6.5 7l1 13h9l1-13"/>',
  ext: '<path d="M14 4.5h5.5V10M19.5 4.5L11 13M17 14v4.5a1 1 0 0 1-1 1H5.5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1H10"/>',
  pill: '<rect x="3.5" y="8" width="17" height="8" rx="4" transform="rotate(-35 12 12)"/><path d="M9.6 8.4l4.8 7.2" />',
  swap: '<path d="M5 9h13l-3.5-3.5M19 15H6l3.5 3.5"/>',
  chart: '<path d="M4 19.5h16"/><path d="M7 16V9M7 9V6.5M12 15v-4M12 11V5M17 16v-5M17 11V8"/><rect x="5.5" y="9" width="3" height="5" rx=".5"/><rect x="10.5" y="7" width="3" height="5" rx=".5"/><rect x="15.5" y="10" width="3" height="4" rx=".5"/>',
  radar: '<circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4.5"/><path d="M12 12l6-6"/>',
  star: '<path d="M12 4l2.5 5.2 5.6.7-4.1 3.9 1 5.6L12 16.7l-5 2.7 1-5.6-4.1-3.9 5.6-.7z"/>',
  bell: '<path d="M6.5 16.5V11a5.5 5.5 0 0 1 11 0v5.5l1.5 2h-14z"/><path d="M10 20.5a2.2 2.2 0 0 0 4 0"/>',
  bellOff: '<path d="M3.5 3.5l17 17M8 6.3A5.5 5.5 0 0 1 17.5 11v4M6.5 10.5v6l-1.5 2h12"/><path d="M10 20.5a2.2 2.2 0 0 0 4 0"/>',
  reset: '<path d="M4.5 12a7.5 7.5 0 1 0 2.2-5.3M4.5 4.5v4h4"/>',
  info: '<circle cx="12" cy="12" r="8.5"/><path d="M12 11v5.5M12 7.6v.2"/>',
  edit: '<path d="M5 19l1-4 10-10 3 3-10 10z"/>',
  down: '<path d="M6.5 9.5l5.5 5.5 5.5-5.5"/>',
  github: '<path d="M9 19.5c-4 1.2-4-2-5.6-2.4M14.6 21.5v-3.2a2.8 2.8 0 0 0-.8-2.2c2.6-.3 5.4-1.3 5.4-5.8a4.5 4.5 0 0 0-1.2-3.1 4.2 4.2 0 0 0-.1-3.1s-1-.3-3.2 1.2a11 11 0 0 0-5.8 0C6.7 3.8 5.7 4.1 5.7 4.1a4.2 4.2 0 0 0-.1 3.1 4.5 4.5 0 0 0-1.2 3.1c0 4.5 2.8 5.5 5.4 5.8a2.8 2.8 0 0 0-.8 2.2v3.2"/>',
};

export function icon(name, size = 14, cls = '') {
  return `<svg class="ic ${cls}" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${P[name] || ''}</svg>`;
}

export function iconEl(name, size, cls) {
  const t = document.createElement('template');
  t.innerHTML = icon(name, size, cls);
  return t.content.firstChild;
}