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

export const IconMask3Outline = 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-mask-3-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M9.03085 5.1327C7.75823 3.81758 5.97459 3 4 3C3.30503 3 2.63371 3.10128 2 3.28988V16.7101C2.63371 16.8987 3.30503 17 4 17C5.97459 17 7.75823 16.1824 9.03085 14.8673C9.39933 14.4865 9.72497 14.064 10 13.6076C10.275 14.064 10.6007 14.4865 10.9692 14.8673C12.2418 16.1824 14.0254 17 16 17C16.695 17 17.3663 16.8987 18 16.7101V3.28988C17.3663 3.10128 16.695 3 16 3C14.0254 3 12.2418 3.81758 10.9692 5.1327C10.6007 5.51348 10.275 5.93598 10 6.39242C9.72497 5.93598 9.39933 5.51348 9.03085 5.1327ZM16.5 4.52233C16.3355 4.50756 16.1688 4.5 16 4.5C14.0011 4.5 12.2496 5.56543 11.2848 7.16657C11.0134 7.61701 10.5259 7.89242 10 7.89242C9.47411 7.89242 8.98663 7.61701 8.71521 7.16657C7.75043 5.56543 5.99891 4.5 4 4.5C3.83122 4.5 3.66446 4.50756 3.5 4.52233V15.4777C3.66446 15.4924 3.83122 15.5 4 15.5C5.99891 15.5 7.75043 14.4346 8.71521 12.8334C8.98663 12.383 9.47411 12.1076 10 12.1076C10.5259 12.1076 11.0134 12.383 11.2848 12.8334C12.2496 14.4346 14.0011 15.5 16 15.5C16.1688 15.5 16.3355 15.4924 16.5 15.4777V4.52233Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconMask3Outline.displayName = "IconMask3Outline";

export default IconMask3Outline;