/* global React */
// Notion-flavored SVG icons. Small, mono-line.

const Icon = ({ d, viewBox = "0 0 14 14", size = 14, stroke = "currentColor", fill = "none", strokeWidth = 1.25 }) => (
  <svg viewBox={viewBox} width={size} height={size} fill={fill} stroke={stroke} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
    <path d={d} />
  </svg>
);

const Icons = {
  Search:    () => <Icon d="M6 1.5a4.5 4.5 0 1 0 2.86 8.0L12 12.5M9.6 9.6a4.5 4.5 0 0 0-3.6-7.1" />,
  Inbox:     () => <Icon d="M1.5 8L3 3.5h8L12.5 8M1.5 8v4.5h11V8M1.5 8h3l1 1.5h3l1-1.5h3" />,
  Home:      () => <Icon d="M1.5 6.5 7 1.5l5.5 5M3 5.5v6.5h8V5.5" />,
  Plus:      () => <Icon d="M7 2.5v9M2.5 7h9" strokeWidth={1.4} />,
  Settings:  () => <Icon d="M7 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM6 1.5h2l.3 1.7 1.3.6 1.5-1 1.5 1.5-1 1.5.6 1.3 1.7.3v2l-1.7.3-.6 1.3 1 1.5-1.5 1.5-1.5-1-1.3.6-.3 1.7H6l-.3-1.7-1.3-.6-1.5 1L1.4 11l1-1.5L1.8 8.2.1 7.9v-2l1.7-.3.6-1.3-1-1.5L2.9 1.3l1.5 1 1.3-.6L6 1.5z" />,
  Calendar:  () => <Icon d="M1.5 3.5h11v9h-11zM1.5 6h11M4 1.5v3M10 1.5v3" />,
  Chevron:   () => <Icon d="M5 3l4 4-4 4" />,
  ChevronD:  () => <Icon d="M3 5l4 4 4-4" />,
  Drag:      () => <Icon d="M5 3.5h.01M9 3.5h.01M5 7h.01M9 7h.01M5 10.5h.01M9 10.5h.01" strokeWidth={2.5} />,
  Dots:      () => <Icon d="M3 7h.01M7 7h.01M11 7h.01" strokeWidth={2.5} />,
  Star:      () => <Icon d="M7 1.5l1.8 3.6 4 .6-2.9 2.8.7 4L7 10.6l-3.6 1.9.7-4L1.2 5.7l4-.6L7 1.5z" />,
  Comment:   () => <Icon d="M2 6c0-2.2 1.8-4 4-4h2c2.2 0 4 1.8 4 4s-1.8 4-4 4H6L3 12.5V10c-.6-.7-1-1.6-1-2.5V6z" />,
  Clock:     () => <Icon d="M7 3v4l2.5 1.5M12.5 7A5.5 5.5 0 1 1 1.5 7a5.5 5.5 0 0 1 11 0z" />,
  Sidebar:   () => <Icon d="M2 2.5h10v9H2zM5.5 2.5v9" />,
  Trash:     () => <Icon d="M2 4h10M5 4V2.5h4V4M3 4l.8 8h6.4L11 4M5.5 6.5v3M8.5 6.5v3" />,
  Templates: () => <Icon d="M2 3.5h5v8H2zM7 3.5h5v4H7zM7 7.5h5v4H7z" />,
  Updates:   () => <Icon d="M7 2.5v5l2.5 1.5M12.5 7A5.5 5.5 0 1 1 1.5 7a5.5 5.5 0 0 1 11 0z" />,
  ArrowSlim: () => <Icon d="M3.5 7H10M7.5 4.5 10 7l-2.5 2.5" />,
  Link:      () => <Icon d="M5.5 8.5L8.5 5.5M5 4.5L6.5 3a2.5 2.5 0 0 1 3.5 3.5L8.5 8M5.5 6L4 7.5A2.5 2.5 0 0 0 7.5 11L9 9.5" />,
  Github:    () => <Icon viewBox="0 0 16 16" size={14} d="M8 0a8 8 0 0 0-2.5 15.6c.4.07.55-.17.55-.38v-1.5c-2 .35-2.5-.5-2.7-.97-.1-.24-.5-.97-.85-1.17-.3-.16-.7-.55-.02-.55.65 0 1.1.6 1.25.85.74 1.24 1.93.9 2.4.68.07-.53.3-.9.53-1.1-1.78-.2-3.6-.9-3.6-3.9 0-.86.3-1.55.8-2.1-.08-.2-.36-1 .08-2.1 0 0 .66-.2 2.15.8a7.4 7.4 0 0 1 2-.27c.67 0 1.35.1 2 .27 1.5-1 2.15-.8 2.15-.8.43 1.1.15 1.9.08 2.1.5.55.8 1.24.8 2.1 0 3-1.83 3.7-3.6 3.9.28.25.53.73.53 1.48v2.2c0 .2.15.46.55.38A8 8 0 0 0 8 0z" fill="currentColor" stroke="none" />,
  Linkedin:  () => <Icon viewBox="0 0 14 14" d="M1.5 5h2v6.5h-2zM2.5 2.5a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1zM5 5h2v.9c.3-.5 1-1 2-1 2.1 0 2.5 1.4 2.5 3.2v3.4H9.5v-3c0-.7 0-1.6-1-1.6s-1.2.8-1.2 1.6v3H5V5z" fill="currentColor" stroke="none" />,
  Mail:      () => <Icon d="M1.5 3.5h11v7h-11zM1.5 3.5l5.5 4 5.5-4" />,
  External:  () => <Icon d="M6 3.5H3.5v7h7V8M8 3.5h3v3M11 3.5l-4 4" />,
  Doc:       () => <Icon d="M3 1.5h6l3 3v8H3zM9 1.5v3h3M5 6h5M5 8.5h5M5 11h3" />,
  Type:      () => <Icon d="M2 3.5h10M4 3.5v8M10 3.5v8M3.5 11.5h5M5.5 11.5h5" />,
  Filter:    () => <Icon d="M2 3.5h10L8.5 8v4l-3-1.5V8L2 3.5z" />,
  Sort:      () => <Icon d="M3 2.5v9M3 11.5l-1.5-1.5M3 11.5l1.5-1.5M9 11.5v-9M9 2.5l-1.5 1.5M9 2.5l1.5 1.5" />,
};

window.Icons = Icons;
