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

export const IconMoonPhasesBicolorSolid = 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-moon-phases-bicolor-solid`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M17.1122 13.6665C17.1994 13.4977 17.0141 13.3226 16.8404 13.3998C15.9724 13.7856 15.0112 14.0001 14 14.0001C10.134 14.0001 7 10.8661 7 7.00007C7 5.27745 7.62224 3.70015 8.65422 2.48069C8.77678 2.33587 8.66071 2.10933 8.47443 2.14529C4.78582 2.8575 2 6.10342 2 10C2 14.4183 5.58172 18 10 18C13.0968 18 15.7826 16.2404 17.1122 13.6665Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
        <path
          opacity=".9"
          d="M10.8575 5.43322C10.9027 5.2957 11.0972 5.2957 11.1424 5.43322L11.4713 6.43302C11.4861 6.47827 11.5216 6.51376 11.5669 6.52865L12.5667 6.85746C12.7042 6.90269 12.7042 7.09722 12.5667 7.14245L11.5669 7.47126C11.5216 7.48614 11.4861 7.52164 11.4713 7.56689L11.1424 8.56669C11.0972 8.70421 10.9027 8.70421 10.8575 8.56669L10.5286 7.56689C10.5138 7.52164 10.4783 7.48614 10.433 7.47126L9.43322 7.14245C9.2957 7.09722 9.2957 6.90269 9.43322 6.85746L10.433 6.52865C10.4783 6.51376 10.5138 6.47827 10.5286 6.43302L10.8575 5.43322Z"
          fill={color}
        />
        <path
          opacity=".3"
          d="M14.4049 2.28885C14.435 2.19717 14.5647 2.19717 14.5949 2.28885L14.8553 3.0808C14.8653 3.11097 14.8889 3.13463 14.9191 3.14456L15.711 3.40502C15.8027 3.43517 15.8027 3.56485 15.711 3.595L14.9191 3.85546C14.8889 3.86538 14.8653 3.88905 14.8553 3.91922L14.5949 4.71117C14.5647 4.80285 14.435 4.80285 14.4049 4.71117L14.1444 3.91922C14.1345 3.88905 14.1109 3.86538 14.0807 3.85546L13.2887 3.595C13.1971 3.56485 13.1971 3.43517 13.2887 3.40502L14.0807 3.14456C14.1109 3.13463 14.1345 3.11097 14.1444 3.0808L14.4049 2.28885Z"
          fill={color}
        />
        <path
          opacity=".6"
          d="M15.4049 8.28885C15.435 8.19717 15.5647 8.19717 15.5949 8.28885L15.8553 9.0808C15.8653 9.11097 15.8889 9.13463 15.9191 9.14456L16.711 9.40502C16.8027 9.43517 16.8027 9.56485 16.711 9.595L15.9191 9.85546C15.8889 9.86538 15.8653 9.88905 15.8553 9.91922L15.5949 10.7112C15.5647 10.8028 15.435 10.8028 15.4049 10.7112L15.1444 9.91922C15.1345 9.88905 15.1109 9.86538 15.0807 9.85546L14.2887 9.595C14.1971 9.56485 14.1971 9.43517 14.2887 9.40502L15.0807 9.14456C15.1109 9.13463 15.1345 9.11097 15.1444 9.0808L15.4049 8.28885Z"
          fill={color}
        />
      </svg>
    );
  }
);

IconMoonPhasesBicolorSolid.displayName = "IconMoonPhasesBicolorSolid";

export default IconMoonPhasesBicolorSolid;