/* eslint-disable react/no-unused-prop-types */
import React from "react";

interface IProps {
  className: string;
  fill?: string;
  stroke?: string;
}

export const LogoIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 27.47 31.88"
    >
      <g>
        <g>
          <path d="M18,5.27V9.41H3.06a2,2,0,0,1-2-2A2.12,2.12,0,0,1,3.14,5.27H18m1-1H3.14A3.14,3.14,0,0,0,0,7.38H0a3.06,3.06,0,0,0,3.06,3.06H19V4.25Z" />
          <path d="M6.93,2.21V4.74a1.75,1.75,0,0,1,.4,0A2,2,0,0,1,8,4.8V3.24H24.9V29H8V8.47a2,2,0,0,1-.63.1,1.75,1.75,0,0,1-.4,0V30h19V2.21Z" />
          <path d="M13.78,24.87a3.26,3.26,0,0,1-3.26-3.43A3.39,3.39,0,0,1,14,18.35h5v-10A1.43,1.43,0,0,0,17.57,7H.71A.71.71,0,0,0,0,7.67V28.91a3,3,0,0,0,3,3H17.46A1.54,1.54,0,0,0,19,30.34V24.87Z" />
          <path d="M19.23,19.23H13.76a2.28,2.28,0,0,0-2.28,2.28V22a2.28,2.28,0,0,0,2.28,2.28h5.47A2.28,2.28,0,0,0,21.51,22v-.46A2.28,2.28,0,0,0,19.23,19.23Zm-4.88,4.08a1.57,1.57,0,1,1,1.56-1.57A1.57,1.57,0,0,1,14.35,23.31Z" />
          <polygon points="10.44 0 10.44 2.72 25.41 2.72 25.41 26.76 27.47 26.76 27.47 0 10.44 0" />
        </g>
      </g>
    </svg>
  );
};
export const UserIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={`${className}`}
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
      />
    </svg>
  );
};

export const ChevronDownIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M19 9l-7 7-7-7"
      />
    </svg>
  );
};

export const ChevronRightIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
    </svg>
  );
};

export const ChevronLeftIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
    </svg>
  );
};

export const AddIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="primary"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M12 4v16m8-8H4"
      />
    </svg>
  );
};

export const RemoveIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        d="M20 12H4"
      />
    </svg>
  );
};

export const UploadIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      viewBox="0 0 20 20"
      fill="primary"
    >
      <path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z" />
      <path d="M9 13h2v5a1 1 0 11-2 0v-5z" />
    </svg>
  );
};

export const CheckIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M5 13l4 4L19 7"
      />
    </svg>
  );
};

export const BanIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
      />
    </svg>
  );
};

export const MenuIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M4 6h16M4 12h16M4 18h16"
      />
    </svg>
  );
};

export const EditIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth="2"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
      />
    </svg>
  );
};

export const PlusIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M12 6v6m0 0v6m0-6h6m-6 0H6"
      />
    </svg>
  );
};

export const DeleteIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth="2"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
      />
    </svg>
  );
};

export const UserPlusIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
      />
    </svg>
  );
};

export const UserGroupIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
      />
    </svg>
  );
};

export const FolderAddIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
      />
    </svg>
  );
};

export const AnnotationIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
      />
    </svg>
  );
};
export const UserRemoveIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M13 7a4 4 0 11-8 0 4 4 0 018 0zM9 14a6 6 0 00-6 6v1h12v-1a6 6 0 00-6-6zM21 12h-6"
      />
    </svg>
  );
};

export const MoreVerticalIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
      />
    </svg>
  );
};
export const FolderIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1.99988 14H8.99988V16H1.99988C0.899878 16 -0.00012207 15.11 -0.00012207 14V2C-0.00012207 0.89 0.889878 0 1.99988 0H7.99988L9.99988 2H17.9999C19.0999 2 19.9999 2.89 19.9999 4V6.17L18.4099 4.59L17.9999 4.17V4H1.99988V14ZM20.9999 10V17C20.9999 18.11 20.1099 19 18.9999 19H12.9999C11.8999 19 10.9999 18.11 10.9999 17V8C10.9999 6.9 11.8999 6 12.9999 6H16.9999L20.9999 10ZM18.9999 11H15.9999V8H12.9999V17H18.9999V11Z" />
    </svg>
  );
};

export const FolderRemoveIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M9 13h6M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
      />
    </svg>
  );
};

export const PhotographIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
      />
    </svg>
  );
};

export const XIcon = (props: IProps) => {
  const { className, fill, stroke } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill={fill}
      viewBox="0 0 24 24"
      stroke={stroke}
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M6 18L18 6M6 6l12 12"
      />
    </svg>
  );
};

export const EditlIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
      />
    </svg>
  );
};

export const DocumentTextIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
      />
    </svg>
  );
};

export const UsersIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
      />
    </svg>
  );
};

export const CollectionIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
      />
    </svg>
  );
};
export const TagIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
      />
    </svg>
  );
};

export const BookmarkIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
      />
    </svg>
  );
};

export const TrashIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
      />
    </svg>
  );
};
export const DotsVerticalIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
      />
    </svg>
  );
};

export const DocumentReportIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
      />
    </svg>
  );
};

export const VerticalDotsIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
      />
    </svg>
  );
};

export const ExclamationCircleIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
      />
    </svg>
  );
};

export const ViewBoardsIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
      />
    </svg>
  );
};

export const PlusCircleIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
      />
    </svg>
  );
};

export const DocumentIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
      />
    </svg>
  );
};

export const DuplicateIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
      />
    </svg>
  );
};

export const ShareIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
      />
    </svg>
  );
};

export const GlobeIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
      />
    </svg>
  );
};

export const BadgeCheckIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
      />
    </svg>
  );
};

export const DownloadIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
      />
    </svg>
  );
};

export const PenIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
      />
    </svg>
  );
};

export const EyeIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
      />
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
      />
    </svg>
  );
};

export const ThumbUpIcon = (props: IProps) => {
  const { className, fill, stroke } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill={fill}
      viewBox="0 0 24 24"
      stroke={stroke || "currentColor"}
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"
      />
    </svg>
  );
};

export const ThumbDownIcon = (props: IProps) => {
  const { className, fill, stroke } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill={fill}
      viewBox="0 0 24 24"
      stroke={stroke || "currentColor"}
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"
      />
    </svg>
  );
};

export const ArrowNarrowLeftIcon = (props: IProps) => {
  const { className, fill, stroke } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill={fill}
      viewBox="0 0 24 24"
      stroke={stroke || "currentColor"}
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M7 16l-4-4m0 0l4-4m-4 4h18"
      />
    </svg>
  );
};

export const Xcircle = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
      />
    </svg>
  );
};

export const MoveIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
    </svg>
  );
};

export const SwitchIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 20 20" fill="currentColor">
      <path d="M8 5a1 1 0 100 2h5.586l-1.293 1.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L13.586 5H8zM12 15a1 1 0 100-2H6.414l1.293-1.293a1 1 0 10-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L6.414 15H12z" />
    </svg>
  );
};

export const CommentIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
    </svg>
  );
};

export const HomeIcon = (props: IProps) => {
  const { className, fill, stroke } = props;
  return (
    <svg viewBox="0 0 20 17" className={className} stroke={stroke} xmlns="http://www.w3.org/2000/svg">
      <path d="M8 17V11H12V17H17V9H20L10 0L0 9H3V17H8Z" fill={fill} />
    </svg>
  );
};

export const MyRepoIcon = (props: IProps) => {
  const { className, fill, stroke } = props;
  return (
    <svg className={className} viewBox="0 0 18 18" stroke={stroke} xmlns="http://www.w3.org/2000/svg">
      <path d="M9 0L0 5.25L1.63 6.2025L9 10.5L16.36 6.2025L18 5.25L9 0ZM16.37 8.0475L9 12.3525L1.62 8.055L0 9L9 14.25L18 9L16.37 8.0475ZM16.37 11.7975L9 16.1025L1.62 11.805L0 12.75L9 18L18 12.75L16.37 11.7975Z" fill={fill} />
    </svg>
  );
};

export const SharedRepoIcon = (props: IProps) => {
  const { className, fill } = props;
  return (
    <svg className={className} viewBox="0 0 18 19" xmlns="http://www.w3.org/2000/svg">
      <path fillRule="evenodd" clipRule="evenodd" d="M9 0L0 5.25L1.63 6.2025L9 10.5L16.36 6.2025L18 5.25L9 0ZM5.31 10.2037L3.85714 11.25L0 9L1.62 8.055L5.31 10.2037ZM0 12.75L3.85714 15L5.31 13.9537L1.62 11.805L0 12.75Z" fill={fill} />
      <path d="M5.31 10.2037L3.85714 11.25L5.14286 12L6.5 10.8967L5.31 10.2037Z" fill={fill} />
      <path d="M5.31 13.9537L3.85714 15L5.14286 15.75L6.5 14.6467L5.31 13.9537Z" fill={fill} />
      <path d="M18 13.6667L13.3333 9V11.6667C8.66667 12.3333 6.66667 15.6667 6 19C7.66667 16.6667 10 15.6 13.3333 15.6V18.3333L18 13.6667Z" fill={fill} />
    </svg>
  );
};

export const SavedRepoIcon = (props: IProps) => {
  const { className, fill } = props;
  return (
    <svg className={className} viewBox="0 0 19 19" fill={fill} xmlns="http://www.w3.org/2000/svg">
      <path fillRule="evenodd" clipRule="evenodd" d="M9 0L0 5.25L1.63 6.2025L9 10.5L16.36 6.2025L18 5.25L9 0ZM9 12.3525V14.25L0 9L1.62 8.055L9 12.3525ZM9 16.1025L1.62 11.805L0 12.75L9 18V16.1025Z" fill={fill} />
      <path d="M15.2083 16.875L12 18.25V11.5C12 10.6716 12.6716 10 13.5 10H16.9167C17.7451 10 18.4167 10.6716 18.4167 11.5V18.25L15.2083 16.875Z" fill={fill} />
    </svg>
  );
};

export const ClasorIcon = (props : IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 114 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0.196875 28.075C1.38021 27.3917 2.22188 26.8417 2.72188 26.425C3.22188 26.0083 3.55521 25.5583 3.72188 25.075C3.88854 24.5917 3.97188 23.8917 3.97188 22.975V14.675H7.57188V22.975C7.57188 24.375 7.39688 25.525 7.04688 26.425C6.69688 27.325 6.09688 28.125 5.24688 28.825C4.39688 29.5417 3.16354 30.3 1.54688 31.1L0.196875 28.075ZM21.5002 20.225C21.6669 20.225 21.7502 20.3083 21.7502 20.475V23.75C21.7502 23.9167 21.6669 24 21.5002 24H20.3752C20.2419 25.15 19.9002 26.1167 19.3502 26.9C18.8169 27.6833 18.0419 28.3833 17.0252 29C16.0252 29.6333 14.6252 30.3333 12.8252 31.1L11.7002 27.925C13.1835 27.2917 14.2835 26.775 15.0002 26.375C15.7335 25.975 16.2335 25.6 16.5002 25.25C16.7669 24.9 16.9002 24.4833 16.9002 24H15.2752C14.2752 24 13.3585 23.775 12.5252 23.325C11.6919 22.875 11.0252 22.2583 10.5252 21.475C10.0419 20.675 9.8002 19.7833 9.8002 18.8C9.8002 17.8 10.0419 16.8833 10.5252 16.05C11.0252 15.2167 11.6919 14.5583 12.5252 14.075C13.3585 13.575 14.2752 13.325 15.2752 13.325C16.2419 13.325 17.1252 13.575 17.9252 14.075C18.7252 14.5583 19.3502 15.2167 19.8002 16.05C20.2502 16.8833 20.4752 17.8 20.4752 18.8V20.225H21.5002ZM16.9002 18.775C16.9002 18.2917 16.7419 17.8917 16.4252 17.575C16.1252 17.2583 15.7419 17.1 15.2752 17.1C14.7919 17.1 14.3835 17.2583 14.0502 17.575C13.7335 17.8917 13.5752 18.2917 13.5752 18.775C13.5752 19.2583 13.7335 19.6583 14.0502 19.975C14.3835 20.2917 14.7919 20.45 15.2752 20.45H16.9002V18.775ZM39.0682 13.925V24H34.5682C33.3682 24 32.4015 23.5667 31.6682 22.7C30.9515 23.6 29.9598 24.05 28.6932 24.05C27.4432 24.05 26.4598 23.6083 25.7432 22.725C25.0265 23.575 24.0432 24 22.7932 24H21.7432C21.5765 24 21.4932 23.9167 21.4932 23.75V20.475C21.4932 20.3083 21.5765 20.225 21.7432 20.225H22.7932C23.1265 20.225 23.4015 20.1167 23.6182 19.9C23.8515 19.6667 23.9682 19.3833 23.9682 19.05V14.675H27.5432V19.1C27.5432 19.4333 27.6515 19.7167 27.8682 19.95C28.0848 20.1667 28.3598 20.275 28.6932 20.275C29.0265 20.275 29.3015 20.1667 29.5182 19.95C29.7348 19.7167 29.8432 19.4333 29.8432 19.1V14.675H33.4432V19.05C33.4432 19.3833 33.5515 19.6667 33.7682 19.9C33.9848 20.1167 34.2515 20.225 34.5682 20.225H35.4682V13.925H39.0682ZM47.9375 20.225C48.2542 20.225 48.5208 20.1167 48.7375 19.9C48.9708 19.6667 49.0875 19.3833 49.0875 19.05V7.425H52.6625V19.05C52.6625 19.3833 52.7708 19.6667 52.9875 19.9C53.2042 20.1167 53.4792 20.225 53.8125 20.225H54.8875C55.0542 20.225 55.1375 20.3083 55.1375 20.475V23.75C55.1375 23.9167 55.0542 24 54.8875 24H53.8125C53.1792 24 52.6125 23.875 52.1125 23.625C51.6125 23.375 51.2042 23.0333 50.8875 22.6C50.5542 23.0333 50.1375 23.375 49.6375 23.625C49.1375 23.875 48.5708 24 47.9375 24H41.1125V20.225H47.9375ZM41.1375 8.375L44.6125 7.475L47.3125 18.55L43.8375 19.45L41.1375 8.375ZM54.8789 20.475C54.8789 20.3083 54.9622 20.225 55.1289 20.225H60.7539C61.2039 20.225 61.5872 20.075 61.9039 19.775C62.2206 19.475 62.3789 19.075 62.3789 18.575C62.3789 17.975 62.0956 17.5 61.5289 17.15L55.8789 13.425V10.7L60.8539 5.4L63.3289 7.725L59.6039 11.6L63.7539 14.325C64.4539 14.775 64.9956 15.3833 65.3789 16.15C65.7789 16.9 65.9789 17.7333 65.9789 18.65C65.9789 19.6167 65.7372 20.5083 65.2539 21.325C64.7872 22.1417 64.1539 22.7917 63.3539 23.275C62.5539 23.7583 61.6706 24 60.7039 24H55.1289C54.9622 24 54.8789 23.9167 54.8789 23.75V20.475Z" fill="#0A0A0A" />
      <path d="M97.4432 1.47129C99.0202 0.560851 100.963 0.560851 102.54 1.47129L110.685 6.17375C112.262 7.08418 113.233 8.76674 113.233 10.5876V19.9925C113.233 21.8134 112.262 23.4959 110.685 24.4064L102.54 29.1088C100.963 30.0193 99.0202 30.0193 97.4432 29.1088L89.2983 24.4064C87.7214 23.4959 86.75 21.8134 86.75 19.9925V10.5876C86.75 8.76673 87.7214 7.08418 89.2983 6.17375L97.4432 1.47129Z" fill="#0A0A0A" />
      <path d="M94.25 17.9047V11.7887" stroke="white" strokeWidth="3" strokeLinecap="round" />
      <path d="M106.25 17.9047V11.7887" stroke="white" strokeWidth="3" strokeLinecap="round" />
      <path d="M100.25 19.9434V9.75" stroke="white" strokeWidth="3" strokeLinecap="round" />
    </svg>
  );
};

export const BellIcon = (props: IProps) => {
  const { className, fill = "none" } = props;
  return (
    <svg xmlns="http://www.w3.org/2000/svg" className={className} fill={fill} viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
    </svg>
  );
};

export const InfoIcon = (props: IProps) => {
  const { className, fill = "none" } = props;
  return (
    <svg className={className} viewBox="0 0 20 20" fill={fill} xmlns="http://www.w3.org/2000/svg">
      <path d="M9 16H11V14H9V16ZM10 0C8.68678 0 7.38642 0.258658 6.17317 0.761205C4.95991 1.26375 3.85752 2.00035 2.92893 2.92893C1.05357 4.8043 0 7.34784 0 10C0 12.6522 1.05357 15.1957 2.92893 17.0711C3.85752 17.9997 4.95991 18.7362 6.17317 19.2388C7.38642 19.7413 8.68678 20 10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C18.9464 15.1957 20 12.6522 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7362 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 10 0V0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18ZM10 4C8.93913 4 7.92172 4.42143 7.17157 5.17157C6.42143 5.92172 6 6.93913 6 8H8C8 7.46957 8.21071 6.96086 8.58579 6.58579C8.96086 6.21071 9.46957 6 10 6C10.5304 6 11.0391 6.21071 11.4142 6.58579C11.7893 6.96086 12 7.46957 12 8C12 10 9 9.75 9 13H11C11 10.75 14 10.5 14 8C14 6.93913 13.5786 5.92172 12.8284 5.17157C12.0783 4.42143 11.0609 4 10 4Z" fill="#0A0A0A" />
    </svg>
  );
};

export const ImageIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M13.8333 13.8333H2.16667V2.16667H13.8333V13.8333ZM13.8333 0.5H2.16667C1.72464 0.5 1.30072 0.675595 0.988155 0.988155C0.675595 1.30072 0.5 1.72464 0.5 2.16667V13.8333C0.5 14.2754 0.675595 14.6993 0.988155 15.0118C1.30072 15.3244 1.72464 15.5 2.16667 15.5H13.8333C14.2754 15.5 14.6993 15.3244 15.0118 15.0118C15.3244 14.6993 15.5 14.2754 15.5 13.8333V2.16667C15.5 1.72464 15.3244 1.30072 15.0118 0.988155C14.6993 0.675595 14.2754 0.5 13.8333 0.5ZM9.63333 8.24167L7.34167 11.1917L5.70833 9.225L3.41667 12.1667H12.5833L9.63333 8.24167Z" />
    </svg>
  );
};

export const PencilIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M9.00002 0.666748C7.90567 0.666748 6.82204 0.882296 5.81099 1.30109C4.79994 1.71987 3.88129 2.3337 3.10746 3.10752C1.54466 4.67033 0.666687 6.78994 0.666687 9.00008C0.666687 11.2102 1.54466 13.3298 3.10746 14.8926C3.88129 15.6665 4.79994 16.2803 5.81099 16.6991C6.82204 17.1179 7.90567 17.3334 9.00002 17.3334C11.2102 17.3334 13.3298 16.4554 14.8926 14.8926C16.4554 13.3298 17.3334 11.2102 17.3334 9.00008H15.6667C15.6667 10.7682 14.9643 12.4639 13.7141 13.7141C12.4638 14.9644 10.7681 15.6667 9.00002 15.6667C7.23191 15.6667 5.53622 14.9644 4.28598 13.7141C3.03573 12.4639 2.33335 10.7682 2.33335 9.00008C2.33335 7.23197 3.03573 5.53628 4.28598 4.28604C5.53622 3.03579 7.23191 2.33341 9.00002 2.33341V0.666748ZM14.65 1.50008C14.5084 1.50008 14.3584 1.55841 14.25 1.66675L13.2334 2.67508L15.3167 4.75841L16.3334 3.75008C16.55 3.53341 16.55 3.16675 16.3334 2.95841L15.0417 1.66675C14.9334 1.55841 14.7917 1.50008 14.65 1.50008ZM12.6417 3.26675L6.50002 9.41675V11.5001H8.58335L14.725 5.35008L12.6417 3.26675Z" />
    </svg>
  );
};

export const SearchIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.5 0C8.22391 0 9.87721 0.684819 11.0962 1.90381C12.3152 3.12279 13 4.77609 13 6.5C13 8.11 12.41 9.59 11.44 10.73L11.71 11H12.5L17.5 16L16 17.5L11 12.5V11.71L10.73 11.44C9.59 12.41 8.11 13 6.5 13C4.77609 13 3.12279 12.3152 1.90381 11.0962C0.684819 9.87721 0 8.22391 0 6.5C0 4.77609 0.684819 3.12279 1.90381 1.90381C3.12279 0.684819 4.77609 0 6.5 0V0ZM6.5 2C4 2 2 4 2 6.5C2 9 4 11 6.5 11C9 11 11 9 11 6.5C11 4 9 2 6.5 2Z" />
    </svg>
  );
};

export const FillArrow = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 4.77345L4.5 0L9 4.77345H0Z" />
    </svg>
  );
};

export const UploadFileIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M8.66658 0.666748L13.6666 5.66675V15.6667C13.6666 16.1088 13.491 16.5327 13.1784 16.8453C12.8659 17.1578 12.4419 17.3334 11.9999 17.3334H1.99992C1.55789 17.3334 1.13397 17.1578 0.821407 16.8453C0.508847 16.5327 0.333252 16.1088 0.333252 15.6667V2.33341C0.333252 1.89139 0.508847 1.46746 0.821407 1.1549C1.13397 0.842343 1.55789 0.666748 1.99992 0.666748H8.66658ZM11.9999 15.6667V6.50008H7.83325V2.33341H1.99992V15.6667H11.9999ZM6.99992 9.00008L10.3333 12.3334H8.24992V14.8334H5.74992V12.3334H3.66658L6.99992 9.00008Z" />
    </svg>
  );
};

export const RepoViewIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fillRule="evenodd" clipRule="evenodd" d="M8.36133 0.083252L0.861328 4.45825L2.21966 5.252L8.36133 8.83325L14.4947 5.252L15.8613 4.45825L8.36133 0.083252ZM5.28633 8.58638L4.07561 9.45825L0.861328 7.58325L2.21133 6.79575L5.28633 8.58638ZM0.861328 10.7083L4.07561 12.5833L5.28633 11.7114L2.21133 9.92075L0.861328 10.7083Z" />
      <path d="M5.28633 8.58638L4.07561 9.45825L5.14704 10.0833L6.278 9.16384L5.28633 8.58638Z" />
      <path d="M5.28633 11.7114L4.07561 12.5833L5.14704 13.2083L6.278 12.2888L5.28633 11.7114Z" />
      <path fillRule="evenodd" clipRule="evenodd" d="M12.1387 9.25C9.88867 9.25 7.88867 10.6667 7.13867 12.5833C7.88867 14.5 9.88867 15.9167 12.1387 15.9167C14.3887 15.9167 16.3887 14.5 17.1387 12.5833C16.3887 10.6667 14.3887 9.25 12.1387 9.25ZM10.0553 12.5833C10.0553 13.75 10.972 14.6667 12.1387 14.6667C13.3053 14.6667 14.222 13.75 14.222 12.5833C14.222 11.4167 13.3053 10.5 12.1387 10.5C10.972 10.5 10.0553 11.4167 10.0553 12.5833ZM12.1387 11.75C12.6387 11.75 12.972 12.0833 12.972 12.5833C12.972 13.0833 12.6387 13.4167 12.1387 13.4167C11.6387 13.4167 11.3053 13.0833 11.3053 12.5833C11.3053 12.0833 11.6387 11.75 12.1387 11.75Z" />
    </svg>
  );
};

export const DocIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1.99992 0.666748C1.55789 0.666748 1.13397 0.842343 0.821407 1.1549C0.508847 1.46746 0.333252 1.89139 0.333252 2.33341V15.6667C0.333252 16.1088 0.508847 16.5327 0.821407 16.8453C1.13397 17.1578 1.55789 17.3334 1.99992 17.3334H11.9999C12.4419 17.3334 12.8659 17.1578 13.1784 16.8453C13.491 16.5327 13.6666 16.1088 13.6666 15.6667V5.66675L8.66658 0.666748H1.99992ZM1.99992 2.33341H7.83325V6.50008H11.9999V15.6667H1.99992V2.33341ZM3.66658 9.00008V10.6667H10.3333V9.00008H3.66658ZM3.66658 12.3334V14.0001H7.83325V12.3334H3.66658Z" />
    </svg>
  );
};

export const FolderBackIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M18 14H2V4H18V14ZM10 2L8 0H2C0.9 0 0 0.89 0 2V14C0 15.11 0.9 16 2 16H18C19.11 16 20 15.11 20 14V4C20 2.9 19.11 2 18 2H10ZM9 10V8H13V5L17 9L13 13V10H9Z" />
    </svg>
  );
};

export const FloatingShareIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M15.2823 10.8827C15.0297 10.524 14.6989 10.2274 14.3148 10.0152C13.9308 9.80304 13.5036 9.68083 13.0655 9.65783C12.6274 9.63483 12.1897 9.71163 11.7856 9.88244C11.3815 10.0533 11.0214 10.3136 10.7326 10.6439L5.97166 8.42383C6.01023 8.14349 6.00778 7.85903 5.96439 7.5794L10.7325 5.356C11.2036 5.89174 11.852 6.23967 12.5589 6.33594C13.2658 6.43222 13.9837 6.27039 14.5809 5.88015C15.1781 5.4899 15.6145 4.89741 15.8102 4.21136C16.0059 3.52532 15.9476 2.79172 15.6461 2.14517C15.3446 1.49861 14.8201 0.982447 14.1687 0.691368C13.5174 0.400289 12.783 0.353815 12.1002 0.560472C11.4174 0.767129 10.832 1.21306 10.4514 1.81645C10.0708 2.41985 9.92049 3.14024 10.0281 3.84548L5.25796 6.0699C4.8643 5.62499 4.34444 5.31055 3.76762 5.16846C3.19079 5.02637 2.58437 5.06336 2.02909 5.27451C1.47381 5.48566 0.996031 5.86095 0.659363 6.35042C0.322696 6.83988 0.143118 7.42028 0.14454 8.01435C0.145962 8.60842 0.328316 9.18796 0.667323 9.6758C1.00633 10.1636 1.4859 10.5366 2.04218 10.7451C2.59847 10.9536 3.20506 10.9877 3.7812 10.8429C4.35734 10.698 4.87568 10.3811 5.26721 9.93429L10.0282 12.1544C9.95876 12.6264 10.0062 13.1082 10.1664 13.5576C10.3267 14.0069 10.5947 14.4101 10.9471 14.7317C11.2995 15.0533 11.7255 15.2834 12.1876 15.402C12.6497 15.5205 13.1338 15.5238 13.5975 15.4116C14.0612 15.2994 14.4902 15.075 14.847 14.7583C15.2037 14.4416 15.4773 14.0421 15.6436 13.595C15.81 13.1478 15.864 12.6667 15.801 12.1938C15.738 11.7209 15.5599 11.2707 15.2823 10.8827ZM13.0061 2.17545C13.2526 2.19466 13.4878 2.28653 13.6821 2.43943C13.8763 2.59233 14.0209 2.7994 14.0975 3.03446C14.174 3.26952 14.1792 3.522 14.1123 3.75999C14.0453 3.99797 13.9094 4.21077 13.7215 4.37146C13.5336 4.53216 13.3023 4.63354 13.0569 4.66278C12.8114 4.69202 12.5627 4.64782 12.3424 4.53575C12.122 4.42368 11.9398 4.24879 11.8189 4.03319C11.6979 3.81758 11.6436 3.57095 11.6628 3.32449C11.6886 2.99399 11.8446 2.68726 12.0965 2.47177C12.3484 2.25629 12.6756 2.1497 13.0061 2.17545ZM2.99355 9.24612C2.74709 9.2269 2.51186 9.13504 2.31762 8.98213C2.12337 8.82923 1.97882 8.62216 1.90226 8.38711C1.82569 8.15205 1.82055 7.89958 1.88748 7.6616C1.95441 7.42362 2.0904 7.21084 2.27826 7.05015C2.46612 6.88947 2.69741 6.78809 2.94288 6.75886C3.18835 6.72962 3.43698 6.77383 3.65733 6.8859C3.87768 6.99796 4.05984 7.17286 4.1808 7.38845C4.30175 7.60405 4.35605 7.85068 4.33684 8.09714C4.32409 8.26078 4.27923 8.42032 4.20482 8.56663C4.13041 8.71294 4.02791 8.84316 3.90317 8.94985C3.77844 9.05655 3.6339 9.13762 3.47783 9.18846C3.32176 9.23929 3.1572 9.25889 2.99355 9.24612ZM12.812 13.8245C12.5655 13.8052 12.3303 13.7134 12.136 13.5605C11.9418 13.4076 11.7972 13.2005 11.7206 12.9655C11.644 12.7304 11.6389 12.4779 11.7058 12.2399C11.7727 12.0019 11.9087 11.7891 12.0966 11.6284C12.2845 11.4677 12.5157 11.3664 12.7612 11.3371C13.0067 11.3079 13.2553 11.3521 13.4757 11.4642C13.6961 11.5762 13.8782 11.7511 13.9992 11.9667C14.1202 12.1823 14.1745 12.4289 14.1553 12.6754C14.1425 12.8391 14.0976 12.9986 14.0232 13.1449C13.9488 13.2912 13.8463 13.4214 13.7216 13.5281C13.5969 13.6348 13.4523 13.7159 13.2963 13.7667C13.1402 13.8176 12.9756 13.8372 12.812 13.8244V13.8245Z" />
    </svg>
  );
};

export const FloatingViewIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2.50016 2.33341V12.3334H17.5002V2.33341H2.50016ZM2.50016 0.666748H17.5002C18.4168 0.666748 19.1668 1.40841 19.1668 2.33341V12.3334C19.1668 12.7751 18.9918 13.2001 18.6752 13.5084C18.3668 13.8251 17.9418 14.0001 17.5002 14.0001H11.6668V15.6667H13.3335V17.3334H6.66683V15.6667H8.3335V14.0001H2.50016C2.0585 14.0001 1.6335 13.8251 1.32516 13.5084C1.0085 13.2001 0.833496 12.7751 0.833496 12.3334V2.33341C0.833496 1.40841 1.57516 0.666748 2.50016 0.666748ZM9.0335 6.44175C9.29183 6.19175 9.64183 6.04175 10.0002 6.04175C10.3585 6.05008 10.7085 6.19175 10.9668 6.45008C11.2168 6.70008 11.3668 7.05008 11.3668 7.40842C11.3668 7.77508 11.2168 8.11675 10.9668 8.37508C10.7085 8.63342 10.3585 8.77508 10.0002 8.77508C9.64183 8.77508 9.29183 8.62508 9.0335 8.37508C8.7835 8.11675 8.63349 7.77508 8.63349 7.40842C8.63349 7.05008 8.7835 6.70008 9.0335 6.44175ZM8.39183 9.00008C8.81683 9.44175 9.40016 9.68341 10.0002 9.68341C10.6002 9.68341 11.1835 9.44175 11.6085 9.00008C12.0335 8.58342 12.2752 8.00842 12.2752 7.40842C12.2752 6.80841 12.0335 6.22508 11.6085 5.80008C11.1835 5.37508 10.6002 5.13342 10.0002 5.13342C9.40016 5.13342 8.81683 5.37508 8.39183 5.80008C7.96683 6.22508 7.72516 6.80841 7.72516 7.40842C7.72516 8.00842 7.96683 8.58342 8.39183 9.00008ZM5.00016 7.40842C5.7835 5.41675 7.72516 4.00008 10.0002 4.00008C12.2752 4.00008 14.2168 5.41675 15.0002 7.40842C14.2168 9.41675 12.2752 10.8167 10.0002 10.8167C7.72516 10.8167 5.7835 9.41675 5.00016 7.40842Z" />
    </svg>
  );
};

export const FloatingFullIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1.83317 7.66675H0.166504V11.8334H4.33317V10.1667H1.83317V7.66675ZM0.166504 4.33342H1.83317V1.83341H4.33317V0.166748H0.166504V4.33342ZM10.1665 10.1667H7.6665V11.8334H11.8332V7.66675H10.1665V10.1667ZM7.6665 0.166748V1.83341H10.1665V4.33342H11.8332V0.166748H7.6665Z" />
    </svg>
  );
};

export const FloatingCommentIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.49984 17.3334C6.27882 17.3334 6.06686 17.2456 5.91058 17.0893C5.7543 16.9331 5.6665 16.7211 5.6665 16.5001V14.0001H2.33317C1.89114 14.0001 1.46722 13.8245 1.15466 13.5119C0.842099 13.1994 0.666504 12.7754 0.666504 12.3334V2.33341C0.666504 1.40841 1.4165 0.666748 2.33317 0.666748H15.6665C16.1085 0.666748 16.5325 0.842343 16.845 1.1549C17.1576 1.46746 17.3332 1.89139 17.3332 2.33341V12.3334C17.3332 12.7754 17.1576 13.1994 16.845 13.5119C16.5325 13.8245 16.1085 14.0001 15.6665 14.0001H10.5832L7.49984 17.0917C7.33317 17.2501 7.12484 17.3334 6.9165 17.3334H6.49984ZM7.33317 12.3334V14.9001L9.89984 12.3334H15.6665V2.33341H2.33317V12.3334H7.33317ZM13.1665 8.16675H11.4998V6.50008H13.1665V8.16675ZM9.83317 8.16675H8.1665V6.50008H9.83317V8.16675ZM6.49984 8.16675H4.83317V6.50008H6.49984V8.16675Z" />
    </svg>
  );
};

export const FloatingLiketIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M4.16683 7.49992V17.4999H0.833496V7.49992H4.16683ZM7.50016 17.4999C7.05813 17.4999 6.63421 17.3243 6.32165 17.0118C6.00909 16.6992 5.8335 16.2753 5.8335 15.8333V7.49992C5.8335 7.04158 6.01683 6.62492 6.32516 6.32492L11.8085 0.833252L12.6918 1.71659C12.9168 1.94159 13.0585 2.24992 13.0585 2.59159L13.0335 2.85825L12.2418 6.66658H17.5002C18.4252 6.66658 19.1668 7.41658 19.1668 8.33325V9.99992C19.1668 10.2166 19.1252 10.4166 19.0502 10.6083L16.5335 16.4833C16.2835 17.0833 15.6918 17.4999 15.0002 17.4999H7.50016ZM7.50016 15.8333H15.0252L17.5002 9.99992V8.33325H10.1752L11.1168 3.89992L7.50016 7.52492V15.8333Z" />
    </svg>
  );
};

export const FloatingDislikeIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M15.8335 10.5V0.5H19.1668V10.5H15.8335ZM12.5002 0.5C12.9422 0.5 13.3661 0.675595 13.6787 0.988155C13.9912 1.30072 14.1668 1.72464 14.1668 2.16667V10.5C14.1668 10.9583 13.9835 11.375 13.6752 11.675L8.19183 17.1667L7.3085 16.2833C7.0835 16.0583 6.94183 15.75 6.94183 15.4L6.96683 15.1417L7.7585 11.3333H2.50016C1.57516 11.3333 0.833496 10.5833 0.833496 9.66667V8C0.833496 7.78333 0.875163 7.58333 0.950163 7.39167L3.46683 1.51667C3.71683 0.916666 4.3085 0.5 5.00016 0.5H12.5002ZM12.5002 2.16667H4.97516L2.50016 8V9.66667H9.81683L8.87516 14.1L12.5002 10.475V2.16667Z" />
    </svg>
  );
};

export const LinkIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3.22706 12.773C2.21943 11.7654 2.21943 10.1272 3.22706 9.1196L5.58408 6.76257L4.46449 5.64299L2.10747 8.00001C1.32607 8.78141 0.887084 9.84122 0.887084 10.9463C0.887084 12.0514 1.32607 13.1112 2.10747 13.8926C2.88887 14.674 3.94868 15.113 5.05375 15.113C6.15882 15.113 7.21863 14.674 8.00003 13.8926L10.3571 11.5355L9.23747 10.416L6.88044 12.773C5.87282 13.7806 4.23468 13.7806 3.22706 12.773ZM6.23226 10.9463L10.9463 6.23224L9.7678 5.05373L5.05375 9.76778L6.23226 10.9463ZM8.00003 2.10745L5.64301 4.46448L6.76259 5.58406L9.11961 3.22704C10.1272 2.21941 11.7654 2.21941 12.773 3.22704C13.7806 4.23467 13.7806 5.8728 12.773 6.88043L10.416 9.23745L11.5356 10.357L13.8926 8.00001C14.674 7.21861 15.113 6.1588 15.113 5.05373C15.113 3.94866 14.674 2.88886 13.8926 2.10745C13.1112 1.32605 12.0514 0.887066 10.9463 0.887066C9.84124 0.887066 8.78143 1.32605 8.00003 2.10745V2.10745Z" />
    </svg>
  );
};

export const AddLinkIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.83334 9.16658C6.9537 9.32706 7.01213 9.52557 6.99791 9.72566C6.98369 9.92575 6.89777 10.114 6.75593 10.2558C6.61409 10.3977 6.42584 10.4836 6.22575 10.4978C6.02566 10.512 5.82715 10.4536 5.66667 10.3332C5.26808 9.95917 4.9504 9.50735 4.73323 9.0057C4.51606 8.50406 4.40402 7.96322 4.40402 7.41658C4.40402 6.86994 4.51606 6.32911 4.73323 5.82746C4.9504 5.32581 5.26808 4.874 5.66667 4.49992L8.58334 1.49992C9.37626 0.73117 10.4373 0.30127 11.5417 0.30127C12.6461 0.30127 13.7071 0.73117 14.5 1.49992C15.2688 2.29283 15.6987 3.35385 15.6987 4.45825C15.6987 5.56264 15.2688 6.62367 14.5 7.41658L13.25 8.66658C13.2678 7.98473 13.1547 7.3058 12.9167 6.66658L13.3333 6.24992C13.7784 5.75931 14.0249 5.12063 14.0249 4.45825C14.0249 3.79586 13.7784 3.15719 13.3333 2.66658C12.8427 2.22154 12.2041 1.97502 11.5417 1.97502C10.8793 1.97502 10.2406 2.22154 9.75001 2.66658L6.83334 5.66658C6.59634 5.89229 6.40766 6.16379 6.27874 6.46461C6.14982 6.76543 6.08334 7.0893 6.08334 7.41658C6.08334 7.74386 6.14982 8.06773 6.27874 8.36855C6.40766 8.66937 6.59634 8.94087 6.83334 9.16658V9.16658ZM17.1667 12.9999V14.6666H14.6667V17.1666H13V14.6666H10.5V12.9999H13V10.4999H14.6667V12.9999H17.1667ZM11.5 9.41658C11.6444 8.74396 11.6129 8.04545 11.4086 7.38855C11.2042 6.73164 10.8339 6.13855 10.3333 5.66658C10.1729 5.54622 9.97436 5.48779 9.77427 5.50201C9.57418 5.51623 9.38593 5.60215 9.24408 5.74399C9.10224 5.88584 9.01632 6.07408 9.0021 6.27417C8.98788 6.47427 9.04632 6.67277 9.16667 6.83325C9.40367 7.05896 9.59235 7.33046 9.72127 7.63128C9.8502 7.9321 9.91667 8.25597 9.91667 8.58325C9.91667 8.91053 9.8502 9.2344 9.72127 9.53522C9.59235 9.83604 9.40367 10.1075 9.16667 10.3332L6.25001 13.3332C5.7594 13.7783 5.12073 14.0248 4.45834 14.0248C3.79596 14.0248 3.15728 13.7783 2.66667 13.3332C2.22163 12.8426 1.97511 12.204 1.97511 11.5416C1.97511 10.8792 2.22163 10.2405 2.66667 9.74992L3.08334 9.41658C2.85173 8.74685 2.73893 8.04181 2.75001 7.33325L1.50001 8.58325C0.731262 9.37617 0.301361 10.4372 0.301361 11.5416C0.301361 12.646 0.731262 13.707 1.50001 14.4999C2.29292 15.2687 3.35395 15.6986 4.45834 15.6986C5.56273 15.6986 6.62376 15.2687 7.41667 14.4999L8.91667 12.9999C9.04406 12.2447 9.34325 11.5288 9.79115 10.9075C10.2391 10.2862 10.8237 9.77611 11.5 9.41658V9.41658Z" />
    </svg>
  );
};

export const RemoveLinkIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.83334 9.16658C6.9537 9.32706 7.01213 9.52557 6.99791 9.72566C6.98369 9.92575 6.89777 10.114 6.75593 10.2558C6.61409 10.3977 6.42584 10.4836 6.22575 10.4978C6.02566 10.512 5.82715 10.4536 5.66667 10.3332C5.26808 9.95916 4.9504 9.50735 4.73323 9.0057C4.51606 8.50406 4.40402 7.96322 4.40402 7.41658C4.40402 6.86994 4.51606 6.32911 4.73323 5.82746C4.9504 5.32581 5.26808 4.874 5.66667 4.49992L8.58334 1.49992C9.37626 0.73117 10.4373 0.30127 11.5417 0.30127C12.6461 0.30127 13.7071 0.73117 14.5 1.49992C15.2688 2.29283 15.6987 3.35385 15.6987 4.45825C15.6987 5.56264 15.2688 6.62367 14.5 7.41658L13.25 8.66658C13.2678 7.98473 13.1547 7.3058 12.9167 6.66658L13.3333 6.24992C13.7784 5.75931 14.0249 5.12063 14.0249 4.45825C14.0249 3.79586 13.7784 3.15719 13.3333 2.66658C12.8427 2.22154 12.2041 1.97502 11.5417 1.97502C10.8793 1.97502 10.2406 2.22154 9.75001 2.66658L6.83334 5.66658C6.59634 5.89229 6.40766 6.16379 6.27874 6.46461C6.14982 6.76543 6.08334 7.0893 6.08334 7.41658C6.08334 7.74386 6.14982 8.06773 6.27874 8.36855C6.40766 8.66937 6.59634 8.94087 6.83334 9.16658ZM11.5 9.41658C11.6444 8.74396 11.6129 8.04545 11.4086 7.38855C11.2042 6.73164 10.8339 6.13855 10.3333 5.66658C10.1729 5.54622 9.97436 5.48779 9.77427 5.50201C9.57417 5.51623 9.38593 5.60215 9.24408 5.74399C9.10224 5.88584 9.01632 6.07408 9.0021 6.27417C8.98788 6.47427 9.04632 6.67277 9.16667 6.83325C9.40367 7.05896 9.59235 7.33046 9.72127 7.63128C9.8502 7.9321 9.91667 8.25597 9.91667 8.58325C9.91667 8.91053 9.8502 9.2344 9.72127 9.53522C9.59235 9.83604 9.40367 10.1075 9.16667 10.3332L6.25001 13.3332C5.7594 13.7783 5.12073 14.0248 4.45834 14.0248C3.79596 14.0248 3.15728 13.7783 2.66667 13.3332C2.22163 12.8426 1.97511 12.204 1.97511 11.5416C1.97511 10.8792 2.22163 10.2405 2.66667 9.74992L3.08334 9.41658C2.85173 8.74685 2.73893 8.04181 2.75001 7.33325L1.50001 8.58325C0.731262 9.37617 0.301361 10.4372 0.301361 11.5416C0.301361 12.646 0.731262 13.707 1.50001 14.4999C2.29292 15.2687 3.35395 15.6986 4.45834 15.6986C5.56273 15.6986 6.62376 15.2687 7.41667 14.4999L8.91667 12.9999C9.04406 12.2447 9.34325 11.5288 9.79115 10.9075C10.2391 10.2862 10.8237 9.77611 11.5 9.41658ZM15.5833 10.9166L13.8333 12.6666L12.0833 10.9166L10.9167 12.0832L12.6667 13.8332L10.9167 15.5832L12.0833 16.7499L13.8333 14.9999L15.5833 16.7499L16.75 15.5832L15 13.8332L16.75 12.0832L15.5833 10.9166Z" />
    </svg>
  );
};

export const CopyIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg className={className} viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M14.8333 17.4999H5.66666V5.83325H14.8333V17.4999ZM14.8333 4.16659H5.66666C5.22463 4.16659 4.80071 4.34218 4.48815 4.65474C4.17558 4.9673 3.99999 5.39122 3.99999 5.83325V17.4999C3.99999 17.9419 4.17558 18.3659 4.48815 18.6784C4.80071 18.991 5.22463 19.1666 5.66666 19.1666H14.8333C15.2754 19.1666 15.6993 18.991 16.0118 18.6784C16.3244 18.3659 16.5 17.9419 16.5 17.4999V5.83325C16.5 5.39122 16.3244 4.9673 16.0118 4.65474C15.6993 4.34218 15.2754 4.16659 14.8333 4.16659V4.16659ZM12.3333 0.833252H2.33332C1.8913 0.833252 1.46737 1.00885 1.15481 1.32141C0.842251 1.63397 0.666656 2.05789 0.666656 2.49992V14.1666H2.33332V2.49992H12.3333V0.833252Z" />
    </svg>
  );
};

export const PhotoIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
    </svg>
  );
};

export const PdfIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
    </svg>
  );
};

export const TextFileIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
    </svg>
  );
};

export const TypeUnNone = (props: IProps) => {
  const { className } = props;
  return (
    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
    </svg>
  );
};

export const AudioFile = (props: IProps) => {
  const { className } = props;
  return (
    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 20 20" fill="currentColor">
      <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
    </svg>
  );
};

export const VideoFile = (props: IProps) => {
  const { className } = props;
  return (
    <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
    </svg>
  );
};

export const CalenderIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
    </svg>
  );
};

export const GlobeAltIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 20 20" fill="currentColor">
      <path fillRule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clipRule="evenodd" />
    </svg>
  );
};

export const SendIcon = (props: IProps) => {
  const { className, fill } = props;
  return (
    <svg
      className={className}
    //   style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M85.333333 896l896-384L85.333333 128v298.666667l640 85.333333-640 85.333333v298.666667z" fill={fill} />

    </svg>
  );
};

export const ChatIcon = (props: IProps) => {
  const { className, fill, stroke } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill={fill}
      viewBox="0 0 24 24"
      stroke={stroke}
    >
      <path fillRule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clipRule="evenodd" />
    </svg>
  );
};

export const InformationIcon = (props: IProps) => {
  const { className } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
      />
    </svg>
  );
};
