papercrate/frontend/src/ui/icons.js

import {
  IconChevronRight as TablerChevronRight,
  IconDownload as TablerDownload,
  IconPencil,
  IconTagFilled,
  IconUserFilled,
  IconTrash,
  IconLayoutList,
  IconLayoutGrid,
  IconArrowLeft,
  IconArrowRight,
  IconArrowUp,
  IconAnalyze,
  IconWindowMaximize,
  IconTextScan2,
  IconFolderPlus,
  IconRefresh,
  IconRestore,
  IconMinusVertical,
  IconLogout,
  IconChevronDown,
  IconX as TablerIconX,
  IconSettings,
  IconCheck,
  IconPlus,
  IconSun,
  IconMoon,
  IconDeviceLaptop,
  IconLayoutSidebarLeftCollapse,
  IconLayoutSidebarLeftExpand,
  IconLayoutSidebarRightCollapse,
  IconInfoCircle,
} from '@tabler/icons-react';
import FolderSvg from '../assets/folder.svg';

const composeClassName = (base, extra) => (extra ? `${base} ${extra}` : base);

export const ChevronIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <TablerChevronRight
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const TrashIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconTrash
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const EditIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconPencil
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const FolderIcon = ({ className, size = 16, title, ...rest }) => {
  const dimensionProps = typeof size === 'number' ? { width: size, height: size } : {};

  return (
    <FolderSvg
      className={composeClassName('folder-icon', className)}
      {...dimensionProps}
      role={title ? 'img' : 'presentation'}
      aria-hidden={title ? undefined : true}
      focusable="false"
      title={title}
      {...rest}
    />
  );
};

export const TagIcon = ({ className, size = '1em', stroke = 0, ...rest }) => (
  <IconTagFilled
    className={composeClassName('icon icon--fill', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const CorrespondentIcon = ({ className, size = '1em', stroke = 0, ...rest }) => (
  <IconUserFilled
    className={composeClassName('icon icon--fill', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const DownloadIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <TablerDownload
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const ViewListIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconLayoutList
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const ViewGridIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconLayoutGrid
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const ArrowLeftIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconArrowLeft
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const ArrowRightIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconArrowRight
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const SidebarCollapseIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconLayoutSidebarLeftCollapse
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const SidebarExpandIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconLayoutSidebarLeftExpand
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const InfoIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconInfoCircle
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const DetailPanelCollapseIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconLayoutSidebarRightCollapse
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const FolderPlusIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconFolderPlus
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const RefreshIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconRefresh
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const RestoreIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconRestore
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const ArrowUpIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconArrowUp
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const MinusVerticalIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconMinusVertical
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const IconFileStack = ({ className, size = 24, stroke = 160, ...rest }) => {
  return (
    <svg
      className={composeClassName('icon', className)}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={stroke}
      strokeLinecap="round"
      strokeLinejoin="round"
      {...rest}
    >
      <defs>
        <path
          id="icon-file-stack-front"
          d="M 5 5.173 l 0 -1.673 c 0 -1.1 0.9 -2 2 -2 l 10 0 c 1.1 0 2 0.9 2 2 l 0 14 c 0 0.7611 -0.4309 1.4265 -1.0608 1.7642 c 0.0548 -0.2682 0.0567 -0.5513 -0.0036 -0.835 l -2.8267 -13.2989 c -0.2356 -1.1082 -1.3351 -1.8223 -2.4433 -1.5867 l -7.6656 1.6294 Z"
        />
        <path
          id="icon-file-stack-left"
          d="M 16.349 20.8725 l -10.075 2.1415 c -1.1082 0.2355 -2.2077 -0.4785 -2.4432 -1.5867 l -2.8268 -13.2989 c -0.2356 -1.1083 0.4784 -2.2077 1.5867 -2.4433 l 10.0749 -2.1415 c 1.1082 -0.2356 2.2077 0.4785 2.4433 1.5867 l 2.8267 13.2989 c 0.2356 1.1082 -0.4784 2.2077 -1.5866 2.4433 Z"
        />
        <path
          id="icon-file-stack-right"
          d="M 17.9392 19.2642 c 0.6299 -0.3377 1.0608 -1.0031 1.0608 -1.7642 l 0 -11.4909 l 2.502 0.5318 c 1.0329 0.2195 1.6984 1.2443 1.4788 2.2772 l -2.6346 12.3951 c -0.2196 1.0329 -1.2443 1.6984 -2.2772 1.4789 l -5.1403 -1.0926 l 3.4203 -0.727 c 0.8245 -0.1753 1.4308 -0.8288 1.5902 -1.6083 Z"
        />
      </defs>

      <use href="#icon-file-stack-right" fill="none" />
      <use href="#icon-file-stack-front" fill="none" />
      <use href="#icon-file-stack-left" fill="none" />
    </svg>
  );
};

export const IconX = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <TablerIconX
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const CloseIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconX
    className={className}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const SettingsIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconSettings
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const PlusIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconPlus
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const SunIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconSun
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const MoonIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconMoon
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const DesktopIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconDeviceLaptop
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const CheckIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconCheck
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const AnalyzeIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconAnalyze
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const WindowMaximizeIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconWindowMaximize
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const LogoutIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconLogout
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const ChevronDownIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconChevronDown
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export default {
  ChevronIcon,
  TrashIcon,
  EditIcon,
  FolderIcon,
  TagIcon,
  CorrespondentIcon,
  DownloadIcon,
  ViewListIcon,
  ViewGridIcon,
  SidebarCollapseIcon,
  SidebarExpandIcon,
  DetailPanelCollapseIcon,
  AnalyzeIcon,
  WindowMaximizeIcon,
  FolderPlusIcon,
  RefreshIcon,
  ArrowUpIcon,
  MinusVerticalIcon,
  LogoutIcon,
  ChevronDownIcon,
};

export const TextScanIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconTextScan2
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);