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

export const IconStarOutline = 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-star-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M8.91657 2.53708C9.36366 1.65693 10.6365 1.65689 11.0836 2.53708L11.1256 2.6279L12.8306 6.72849L17.2584 7.08395C18.3388 7.17069 18.7768 8.51835 17.9537 9.2236L14.5797 12.1133L15.6109 16.4336C15.8624 17.488 14.7157 18.3216 13.7906 17.7568L9.99958 15.4404L6.20954 17.7568C5.28442 18.3217 4.13771 17.488 4.38923 16.4336L5.41853 12.1133L2.04646 9.2236C1.22321 8.51834 1.66118 7.17058 2.74177 7.08395L7.16853 6.72849L8.87458 2.6279L8.91657 2.53708ZM8.48786 7.46286C8.3124 7.88471 7.91591 8.17327 7.46052 8.20993L3.53571 8.52438L6.52595 11.0859C6.87283 11.3831 7.02434 11.8496 6.91853 12.2939L6.00446 16.123L9.36482 14.0722L9.51521 13.9931C9.8242 13.8592 10.176 13.8591 10.4849 13.9931L10.6353 14.0722L13.9947 16.124L13.0816 12.2939C12.9758 11.8495 13.1272 11.3831 13.4742 11.0859L16.4634 8.52438L12.5396 8.20993C12.0842 8.17333 11.6878 7.88476 11.5123 7.46286L9.99958 3.82712L8.48786 7.46286Z"
          fill={color}
        />
      </svg>
    );
  }
);

IconStarOutline.displayName = "IconStarOutline";

export default IconStarOutline;