papercrate/frontend/src/ui/icons.js

import {
  IconChevronRight as TablerChevronRight,
  IconDownload as TablerDownload,
  IconPencil,
  IconTagFilled,
  IconUserFilled,
  IconTrash,
  IconLayoutList,
  IconLayoutGrid,
  IconArrowLeft,
  IconArrowRight,
  IconArrowUp,
  IconAnalyze,
  IconUpload,
  IconWindowMaximize,
  IconTextScan2,
  IconFolderPlus,
  IconFolder,
  IconFolders,
  IconFoldersOff,
  IconRefresh,
  IconRestore,
  IconMinusVertical,
  IconLogout,
  IconChevronDown,
  IconX as TablerIconX,
  IconSettings,
  IconCheck,
  IconPlus,
  IconSun,
  IconMoon,
  IconDeviceLaptop,
  IconLayoutSidebarLeftCollapse,
  IconLayoutSidebarLeftExpand,
  IconLayoutSidebarRightCollapse,
  IconLayoutBottombarCollapse,
  IconLayoutBottombarExpand,
  IconClearAll,
  IconInfoCircle,
  IconCircleDashedCheck,
  IconFile,
  IconLoader,
  IconSortAscendingLetters,
  IconSortDescendingLetters,
  IconFileInfo,
  IconAlertTriangle,
} from '@tabler/icons-react';
import FolderSvg from '../assets/folder.svg';
import composeClassName from './classNames';

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 UploadIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconUpload
    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 FileInfoIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconFileInfo
    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 BottombarCollapseIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconLayoutBottombarCollapse
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

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

export const ClearAllIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconClearAll
    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 FoldersIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconFolders
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const FoldersOffIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconFoldersOff
    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 SortAscendingLettersIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconSortAscendingLetters
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

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

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 CircleDashedCheckIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconCircleDashedCheck
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

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

export const FolderOutlineIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconFolder
    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 LoaderIcon = ({ className, size = '1em', stroke = 1.8, ...rest }) => (
  <IconLoader
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const WarningIcon = ({ className, size = '1em', stroke = 1.8, ...rest }) => (
  <IconAlertTriangle
    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,
  LoaderIcon,
  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}
  />
);