import { forwardRef } from "react";
import type { IconProps } from "../../types";

export const IconFileFontOutline = forwardRef<SVGSVGElement, IconProps>(
  ({ color = "currentColor", ...props }, forwardedRef) => {
    const { className } = props;
    props = {
      ...props,
      width: `${props.width || props.size || 20}`,
      height: `${props.height || props.size || 20}`,
      className: `${
        className ? className + " " : ""
      }customeow-shein-icon customeow-shein-icon-icon-file-font-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M4.6875 1.125C3.75552 1.125 3 1.88052 3 2.8125V17.1875C3 18.1195 3.75552 18.875 4.6875 18.875H15.3125C16.2445 18.875 17 18.1195 17 17.1875V9.375C17 4.81865 13.3063 1.125 8.75 1.125H4.6875ZM4.6875 2.625C4.58395 2.625 4.5 2.70895 4.5 2.8125V17.1875C4.5 17.2911 4.58395 17.375 4.6875 17.375H15.3125C15.4161 17.375 15.5 17.2911 15.5 17.1875V9.6875C15.5 8.54841 14.5766 7.625 13.4375 7.625H12.1875C11.2555 7.625 10.5 6.86948 10.5 5.9375V4.6875C10.5 3.54841 9.57659 2.625 8.4375 2.625H4.6875ZM11.7259 3.31472C11.9025 3.73721 12 4.20096 12 4.6875V5.9375C12 6.04105 12.0839 6.125 12.1875 6.125H13.4375C13.924 6.125 14.3878 6.22253 14.8103 6.39911C14.1521 5.06119 13.0638 3.97295 11.7259 3.31472ZM11.4885 14.5499L10.931 13.1671C10.9274 13.1582 10.9191 13.1525 10.91 13.1525H9.11675C9.10761 13.1525 9.09936 13.1582 9.09578 13.167L8.53391 14.5534C8.44974 14.7611 8.25428 14.8955 8.0384 14.8955C7.65523 14.8955 7.39318 14.4891 7.54265 14.1191L9.50958 9.25022C9.69822 8.78326 10.3342 8.78326 10.5228 9.25022L12.4746 14.1643C12.4746 14.1643 12.6679 14.7858 11.988 14.8955C11.7727 14.9302 11.573 14.7596 11.4885 14.5499ZM10.4663 12.0999H9.56279C9.54644 12.0999 9.5354 12.0823 9.54181 12.0665L9.93162 11.1047C9.96317 11.0269 10.0681 11.027 10.0995 11.1049L10.4872 12.0666C10.4936 12.0824 10.4826 12.0999 10.4663 12.0999Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconFileFontOutline.displayName = "IconFileFontOutline";

export default IconFileFontOutline;