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

export const IconArrowsSortOutline = 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-arrows-sort-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M11.7363 16.5755C11.6072 16.436 11.5457 16.2581 11.5502 16.082L11.55 16.064V4.0999C11.55 3.7133 11.8634 3.3999 12.25 3.3999C12.6366 3.3999 12.95 3.7133 12.95 4.0999V14.4979L15.7744 11.8829C16.0581 11.6203 16.501 11.6373 16.7637 11.921C17.0263 12.2047 17.0092 12.6476 16.7256 12.9102L12.7256 16.6136C12.4419 16.8762 11.999 16.8591 11.7363 16.5755ZM8.31363 3.62439C8.44274 3.76384 8.50426 3.94175 8.49975 4.11781L8.49998 4.13583V16.1C8.49998 16.4866 8.18658 16.8 7.79998 16.8C7.41338 16.8 7.09998 16.4866 7.09998 16.1V5.70199L4.27554 8.31696C3.99186 8.5796 3.54897 8.56255 3.28632 8.27886C3.02368 7.99518 3.04073 7.55229 3.32442 7.28965L7.32442 3.5863C7.6081 3.32365 8.05099 3.34071 8.31363 3.62439Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconArrowsSortOutline.displayName = "IconArrowsSortOutline";

export default IconArrowsSortOutline;