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

export const IconClearOutline = 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-clear-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M14.2446 2.19325C14.5375 1.90035 15.0124 1.90035 15.3053 2.19325L17.6623 4.55027C17.9552 4.84316 17.9552 5.31803 17.6623 5.61093L15.4294 7.84379L17.9043 10.3187C18.1972 10.6116 18.1972 11.0864 17.9043 11.3793L15.2463 14.0373C14.9534 14.3302 14.4786 14.3302 14.1857 14.0373L14.1163 13.968L11.6867 18.046C11.5683 18.2448 11.3648 18.3777 11.1352 18.4064C10.9056 18.435 10.6757 18.3561 10.5121 18.1925L4.28328 11.9637C4.28085 11.9613 4.27845 11.9589 4.27605 11.9564L1.65791 9.33829C1.49377 9.17415 1.41489 8.94326 1.44427 8.71301C1.47366 8.48275 1.60801 8.27908 1.80811 8.16143L5.90251 5.75412L5.81825 5.66987C5.6776 5.52921 5.59858 5.33845 5.59858 5.13953C5.59858 4.94062 5.6776 4.74986 5.81825 4.60921L8.47622 1.95124C8.76911 1.65834 9.24399 1.65834 9.53688 1.95124L12.0118 4.42611L14.2446 2.19325ZM5.96579 11.5249L7.28438 10.5833C7.62147 10.3426 7.6996 9.87416 7.45889 9.53707C7.21818 9.19998 6.74978 9.12185 6.41268 9.36256L4.89048 10.4495L3.40408 8.96313L6.96644 6.86864L13.0033 12.9055L10.8913 16.4504L5.96579 11.5249ZM14.7749 3.78424L12.5421 6.0171C12.2492 6.30999 11.7743 6.30999 11.4814 6.0171L9.00655 3.54223L7.40924 5.13954L14.716 12.4463L16.3133 10.849L13.8384 8.37412C13.5456 8.08123 13.5456 7.60636 13.8384 7.31346L16.0713 5.0806L14.7749 3.78424Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconClearOutline.displayName = "IconClearOutline";

export default IconClearOutline;