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

export const IconArrowsRightLeftSortOutline = 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-right-left-sort-outline`,
  };
  return (
    <svg
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
      ref={forwardedRef}
    >
      <path
        d="M16.5005 8.38878C16.3611 8.51788 16.1832 8.5794 16.0071 8.57489L15.9891 8.57512L4.02495 8.57512C3.63835 8.57512 3.32495 8.26172 3.32495 7.87512C3.32495 7.48852 3.63835 7.17512 4.02495 7.17512L14.4229 7.17512L11.8079 4.35068C11.5453 4.067 11.5624 3.62411 11.846 3.36147C12.1297 3.09882 12.5726 3.11588 12.8353 3.39956L16.5386 7.39956C16.8013 7.68324 16.7842 8.12613 16.5005 8.38878ZM3.54944 11.8115C3.68889 11.6824 3.8668 11.6209 4.04286 11.6254L4.06088 11.6251L16.025 11.6251C16.4116 11.6251 16.725 11.9385 16.725 12.3251C16.725 12.7117 16.4116 13.0251 16.025 13.0251L5.62704 13.0251L8.24201 15.8496C8.50465 16.1333 8.4876 16.5762 8.20391 16.8388C7.92023 17.1014 7.47734 17.0844 7.21469 16.8007L3.51135 12.8007C3.2487 12.517 3.26576 12.0741 3.54944 11.8115Z"
        fill={color}
        fillRule="evenodd"
        clipRule="evenodd"
      />
    </svg>
  );
});

IconArrowsRightLeftSortOutline.displayName = "IconArrowsRightLeftSortOutline";

export default IconArrowsRightLeftSortOutline;