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

export const IconMask5Outline = 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-5-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M12.7553 3.34807L10 1L7.24468 3.34807L3.63604 3.63604L3.34807 7.24468L1 10L3.34807 12.7553L3.63604 16.364L7.24468 16.6519L10 19L12.7553 16.6519L16.364 16.364L16.6519 12.7553L19 10L16.6519 7.24468L16.364 3.63604L12.7553 3.34807ZM14.9704 5.0296L12.152 4.80469L10 2.97079L7.84803 4.80469L5.0296 5.0296L4.80469 7.84803L2.97079 10L4.80469 12.152L5.0296 14.9704L7.84803 15.1953L10 17.0292L12.152 15.1953L14.9704 14.9704L15.1953 12.152L17.0292 10L15.1953 7.84803L14.9704 5.0296Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconMask5Outline.displayName = "IconMask5Outline";

export default IconMask5Outline;