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

export const IconDragCursorArrowOutline = 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-drag-cursor-arrow-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M7.02119 5.41671C7.25441 5.28262 7.54727 5.3128 7.74823 5.49165L13.6539 10.7474C13.8427 10.9155 13.9117 11.1807 13.8287 11.4195 13.7457 11.6583 13.5271 11.8235 13.2747 11.8382L11.4938 11.942 12.0801 12.9617C12.2522 13.2609 12.1491 13.643 11.8498 13.815 11.5506 13.9871 11.1685 13.884 10.9965 13.5847L10.4102 12.5651 9.42475 14.0518C9.2851 14.2625 9.03226 14.3684 8.78414 14.32 8.53603 14.2716 8.34149 14.0785 8.29126 13.8308L6.72019 6.08274C6.66673 5.81908 6.78798 5.5508 7.02119 5.41671ZM8.31787 7.67193 9.21646 12.1035 9.92697 11.0315C10.0356 10.8676 10.2152 10.7643 10.4116 10.7529L11.6957 10.6781 8.31787 7.67193ZM2.08331 2.70837C2.08331 2.3632 2.36314 2.08337 2.70831 2.08337H3.95831C4.30349 2.08337 4.58331 2.3632 4.58331 2.70837 4.58331 3.05355 4.30349 3.33337 3.95831 3.33337H3.33331V3.95837C3.33331 4.30355 3.05349 4.58337 2.70831 4.58337 2.36314 4.58337 2.08331 4.30355 2.08331 3.95837V2.70837ZM5.83331 2.70837C5.83331 2.3632 6.11313 2.08337 6.45831 2.08337H8.95831C9.30349 2.08337 9.58331 2.3632 9.58331 2.70837 9.58331 3.05355 9.30349 3.33337 8.95831 3.33337H6.45831C6.11313 3.33337 5.83331 3.05355 5.83331 2.70837ZM10.8333 2.70837C10.8333 2.3632 11.1131 2.08337 11.4583 2.08337H12.7083C13.0535 2.08337 13.3333 2.3632 13.3333 2.70837V3.76607C13.3333 4.11124 13.0535 4.39107 12.7083 4.39107 12.3631 4.39107 12.0833 4.11124 12.0833 3.76607V3.33337H11.4583C11.1131 3.33337 10.8333 3.05355 10.8333 2.70837ZM12.7083 5.25645C13.0535 5.25645 13.3333 5.53627 13.3333 5.88145V6.93914C13.3333 7.28432 13.0535 7.56414 12.7083 7.56414 12.3631 7.56414 12.0833 7.28432 12.0833 6.93914V5.88145C12.0833 5.53627 12.3631 5.25645 12.7083 5.25645ZM2.70831 5.83337C3.05349 5.83337 3.33331 6.1132 3.33331 6.45837V8.95837C3.33331 9.30355 3.05349 9.58337 2.70831 9.58337 2.36314 9.58337 2.08331 9.30355 2.08331 8.95837V6.45837C2.08331 6.1132 2.36314 5.83337 2.70831 5.83337ZM2.70831 10.8334C3.05349 10.8334 3.33331 11.1132 3.33331 11.4584V12.0834H3.54165C3.88682 12.0834 4.16665 12.3632 4.16665 12.7084 4.16665 13.0536 3.88682 13.3334 3.54165 13.3334H2.70831C2.36314 13.3334 2.08331 13.0536 2.08331 12.7084V11.4584C2.08331 11.1132 2.36314 10.8334 2.70831 10.8334ZM4.58331 12.7084C4.58331 12.3632 4.86313 12.0834 5.20831 12.0834H6.04165C6.38682 12.0834 6.66665 12.3632 6.66665 12.7084 6.66665 13.0536 6.38682 13.3334 6.04165 13.3334H5.20831C4.86313 13.3334 4.58331 13.0536 4.58331 12.7084Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
        <path
          d="M13.7879 6.04171C13.7879 5.69653 14.0677 5.41671 14.4129 5.41671H15.2083C16.0137 5.41671 16.6666 6.06963 16.6666 6.87504V16.0417C16.6666 16.8471 16.0137 17.5 15.2083 17.5H6.04165C5.23623 17.5 4.58331 16.8471 4.58331 16.0417V14.7917C4.58331 14.4465 4.86313 14.1667 5.20831 14.1667C5.55349 14.1667 5.83331 14.4465 5.83331 14.7917V16.0417C5.83331 16.1568 5.92659 16.25 6.04165 16.25H15.2083C15.3234 16.25 15.4166 16.1568 15.4166 16.0417V6.87504C15.4166 6.75998 15.3234 6.66671 15.2083 6.66671H14.4129C14.0677 6.66671 13.7879 6.38689 13.7879 6.04171Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconDragCursorArrowOutline.displayName = "IconDragCursorArrowOutline";

export default IconDragCursorArrowOutline;