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

export const IconArrowTopRightOnSquare = 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-arrow-top-right-on-square`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M4.75 5.80005C4.33579 5.80005 4 6.13584 4 6.55005V15.05C4 15.4643 4.33579 15.8 4.75 15.8H13.25C13.6642 15.8 14 15.4643 14 15.05V11.05C14 10.6358 14.3358 10.3 14.75 10.3C15.1642 10.3 15.5 10.6358 15.5 11.05V15.05C15.5 16.2927 14.4926 17.3 13.25 17.3H4.75C3.50736 17.3 2.5 16.2927 2.5 15.05V6.55005C2.5 5.30741 3.50736 4.30005 4.75 4.30005H9.75C10.1642 4.30005 10.5 4.63584 10.5 5.05005C10.5 5.46426 10.1642 5.80005 9.75 5.80005H4.75Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
        <path
          d="M6.69385 13.0532C6.97175 13.3604 7.44603 13.3841 7.75319 13.1062L17 4.74003V7.55005C17 7.96426 17.3358 8.30005 17.75 8.30005C18.1642 8.30005 18.5 7.96426 18.5 7.55005V3.05005C18.5 2.63584 18.1642 2.30005 17.75 2.30005H13.25C12.8358 2.30005 12.5 2.63584 12.5 3.05005C12.5 3.46426 12.8358 3.80005 13.25 3.80005H15.8032L6.74682 11.9939C6.43966 12.2718 6.41595 12.7461 6.69385 13.0532Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconArrowTopRightOnSquare.displayName = "IconArrowTopRightOnSquare";

export default IconArrowTopRightOnSquare;