packages/pass/components/Layout/Icon/PassIcon.tsx

   1 import type { FC } from 'react';
   2
   3 import type { IconSize } from '@proton/components';
   4 import { usePassCore } from '@proton/pass/components/Core/PassCoreProvider';
   5 import { PassThemeOption } from '@proton/pass/components/Layout/Theme/types';
   6 import { PassIconStatus } from '@proton/pass/types/data/pass-icon';
   7
   8 import { getIconSizePx } from './IconBox';
   9
  10 type Props = { status: PassIconStatus; size: IconSize; className?: string };
  11
  12 export const PassIcon: FC<Props> = ({ status, size, className }) => {
  13     const { theme } = usePassCore();
  14
  15     const icon = (() => {
  16         if (status === PassIconStatus.LOCKED_DROPDOWN && theme === PassThemeOption.PassLight) return `${status}-light`;
  17         return status;
  18     })();
  19
  20     return (
  21         <img
  22             src={`/assets/${icon}.svg`}
  23             width={getIconSizePx(size)}
  24             height={getIconSizePx(size)}
  25             alt=""
  26             className={className}
  27         />
  28     );
  29 };