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

export const IconArrowChevronDownOutline = 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-chevron-down-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M5.23017 7.70938C5.52875 7.42228 6.00353 7.43159 6.29063 7.73017L10 11.6679L13.7094 7.73017C13.9965 7.43159 14.4713 7.42228 14.7698 7.70938C15.0684 7.99647 15.0777 8.47125 14.7906 8.76983L10.5406 13.2698C10.3992 13.4169 10.204 13.5 10 13.5C9.79599 13.5 9.60078 13.4169 9.45938 13.2698L5.20938 8.76983C4.92228 8.47125 4.93159 7.99647 5.23017 7.70938Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconArrowChevronDownOutline.displayName = "IconArrowChevronDownOutline";

export default IconArrowChevronDownOutline;