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

export const IconCropSquare9To21Outline = 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-icon customeow-icon-icon-crop-square-9-to-21-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M7.5 16L6 16L6 3L7.5 3L7.5 16ZM8 16.5L12 16.5C12.2761 16.5 12.5 16.2761 12.5 16L12.5 3C12.5 2.72386 12.2761 2.5 12 2.5L8 2.5C7.72386 2.5 7.5 2.72386 7.5 3L6 3L6.01074 2.7959C6.1062 1.85435 6.85435 1.1062 7.7959 1.01074L8 1L12 1C13.1046 1 14 1.89543 14 3L14 16C14 17.1046 13.1046 18 12 18L8 18L7.7959 17.9893C6.85435 17.8938 6.1062 17.1457 6.01074 16.2041L6 16L7.5 16C7.5 16.2761 7.72386 16.5 8 16.5Z"
          fill={color}
        />
      </svg>
    );
  }
);

IconCropSquare9To21Outline.displayName = "IconCropSquare9To21Outline";

export default IconCropSquare9To21Outline;