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

export const IconSearchOutline = 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-search-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M9.16659 2.70825C5.59975 2.70825 2.70825 5.59975 2.70825 9.16659C2.70825 12.7334 5.59975 15.6249 9.16659 15.6249C10.7249 15.6249 12.1544 15.073 13.2701 14.154L16.6413 17.5252L17.5252 16.6413L14.154 13.2701C15.073 12.1544 15.6249 10.7249 15.6249 9.16659C15.6249 5.59975 12.7334 2.70825 9.16659 2.70825ZM3.95825 9.16659C3.95825 6.2901 6.2901 3.95825 9.16659 3.95825C12.0431 3.95825 14.3749 6.2901 14.3749 9.16659C14.3749 12.0431 12.0431 14.3749 9.16659 14.3749C6.2901 14.3749 3.95825 12.0431 3.95825 9.16659Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconSearchOutline.displayName = "IconSearchOutline";

export default IconSearchOutline;