papercrate/frontend/src/ui/icons.js

import {
  IconChevronRight as TablerChevronRight,
  IconDownload as TablerDownload,
  IconPencil,
  IconTagFilled,
  IconUserFilled,
  IconTrash,
  IconLayoutList,
  IconLayoutGrid,
  IconArrowLeft,
  IconArrowRight,
  IconArrowUp,
  IconChevronsRight,
  IconChevronsLeft,
  IconAnalyze,
  IconWindowMaximize,
  IconTextScan2,
  IconFolderPlus,
  IconRefresh,
  IconMinusVertical,
  IconLogout,
  IconChevronDown,
  IconX,
} 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 ChevronsLeftIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconChevronsLeft
    className={composeClassName('icon', className)}
    size={size}
    stroke={stroke}
    {...rest}
  />
);

export const ChevronsRightIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconChevronsRight
    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 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 CloseIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
  <IconX
    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,
  ChevronsLeftIcon,
  ChevronsRightIcon,
  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}
  />
);