/* global React */
// Minimal stroke-icon set, 16x16 by default
const Icon = ({ d, size = 16, fill, stroke = "currentColor", strokeWidth = 1.5, children, viewBox = "0 0 24 24" }) => (
  <svg width={size} height={size} viewBox={viewBox} fill={fill || "none"} stroke={stroke} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0}}>
    {d ? <path d={d} /> : children}
  </svg>
);

const IconSearch    = (p) => <Icon {...p}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></Icon>;
const IconPlus      = (p) => <Icon {...p}><path d="M12 5v14M5 12h14"/></Icon>;
const IconFilter    = (p) => <Icon {...p}><path d="M3 5h18M6 12h12M10 19h4"/></Icon>;
const IconSort      = (p) => <Icon {...p}><path d="M3 7h13M3 12h9M3 17h5M17 6v12M21 14l-4 4-4-4"/></Icon>;
const IconDots      = (p) => <Icon {...p}><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></Icon>;
const IconChevron   = (p) => <Icon {...p}><path d="M9 6l6 6-6 6"/></Icon>;
const IconChevronDn = (p) => <Icon {...p}><path d="M6 9l6 6 6-6"/></Icon>;
const IconUsers     = (p) => <Icon {...p}><circle cx="9" cy="8" r="3.5"/><path d="M2 20c0-3.3 3.1-6 7-6s7 2.7 7 6"/><circle cx="17" cy="9" r="2.5"/><path d="M16 14c3.3 0 6 2.2 6 5"/></Icon>;
const IconList      = (p) => <Icon {...p}><path d="M4 6h16M4 12h16M4 18h16"/></Icon>;
const IconCheckCirc = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-6"/></Icon>;
const IconStar      = (p) => <Icon {...p}><path d="M12 3l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.2l1.1-6.2L3 9.6l6.2-.9z"/></Icon>;
const IconReceipt   = (p) => <Icon {...p}><path d="M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6M9 16h4"/></Icon>;
const IconUpload    = (p) => <Icon {...p}><path d="M12 4v12M7 9l5-5 5 5M4 20h16"/></Icon>;
const IconDownload  = (p) => <Icon {...p}><path d="M12 4v12M7 11l5 5 5-5M4 20h16"/></Icon>;
const IconBell      = (p) => <Icon {...p}><path d="M6 8a6 6 0 0112 0v4l2 3H4l2-3zM10 19a2 2 0 004 0"/></Icon>;
const IconSettings  = (p) => <Icon {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1.1 1.7 1.7 0 00-.3-1.8L4.2 7a2 2 0 112.8-2.8L7.1 4.3a1.7 1.7 0 001.8.3h0a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3L17 4.2a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8v0a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z"/></Icon>;
const IconBuilding  = (p) => <Icon {...p}><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M9 9h.01M15 9h.01M9 13h.01M15 13h.01M9 17h.01M15 17h.01"/></Icon>;
const IconShield    = (p) => <Icon {...p}><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6z"/></Icon>;
const IconClock     = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></Icon>;
const IconFile      = (p) => <Icon {...p}><path d="M14 3H6v18h12V7zM14 3v4h4"/></Icon>;
const IconCheck     = (p) => <Icon {...p}><path d="M5 12l5 5L20 7"/></Icon>;
const IconX         = (p) => <Icon {...p}><path d="M6 6l12 12M18 6L6 18"/></Icon>;
const IconArrow     = (p) => <Icon {...p}><path d="M5 12h14M13 6l6 6-6 6"/></Icon>;
const IconExt       = (p) => <Icon {...p}><path d="M14 4h6v6M20 4l-9 9M10 6H5v13h13v-5"/></Icon>;
const IconCard      = (p) => <Icon {...p}><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h2"/></Icon>;
const IconChart     = (p) => <Icon {...p}><path d="M4 20V8M10 20V4M16 20v-8M22 20H2"/></Icon>;
const IconLogout    = (p) => <Icon {...p}><path d="M15 4h4v16h-4M3 12h12M11 8l4 4-4 4"/></Icon>;
const IconCal       = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="16" rx="1"/><path d="M3 9h18M8 3v4M16 3v4"/></Icon>;
const IconEye       = (p) => <Icon {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></Icon>;
const IconLock      = (p) => <Icon {...p}><rect x="5" y="11" width="14" height="10" rx="1"/><path d="M8 11V7a4 4 0 018 0v4"/></Icon>;
const IconBank      = (p) => <Icon {...p}><path d="M3 10l9-6 9 6M5 10v9M19 10v9M9 10v9M15 10v9M3 21h18"/></Icon>;
const IconTag       = (p) => <Icon {...p}><path d="M3 12l8.5-8.5a2 2 0 011.4-.6H20v6.6c0 .5-.2 1-.6 1.4L11 20a2 2 0 01-2.8 0l-5.2-5.2a2 2 0 010-2.8z"/><circle cx="15" cy="9" r="1"/></Icon>;
const IconLayers    = (p) => <Icon {...p}><path d="M12 3l9 5-9 5-9-5zM3 13l9 5 9-5M3 18l9 5 9-5"/></Icon>;

Object.assign(window, {
  Icon,
  IconSearch, IconPlus, IconFilter, IconSort, IconDots, IconChevron, IconChevronDn,
  IconUsers, IconList, IconCheckCirc, IconStar, IconReceipt, IconUpload, IconDownload,
  IconBell, IconSettings, IconBuilding, IconShield, IconClock, IconFile, IconCheck, IconX,
  IconArrow, IconExt, IconCard, IconChart, IconLogout, IconCal, IconEye, IconLock,
  IconBank, IconTag, IconLayers,
});