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

export const IconAttributeOpacityBicolorSolid = 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-attribute-opacity-bicolor-solid`,
  };
  return (
    <svg
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
      ref={forwardedRef}
    >
      <path
        d="M3.33325 4.03337C3.33325 3.64677 3.64665 3.33337 4.03325 3.33337H6.66659V6.66671H3.33325V4.03337Z"
        fill={color}
      />
      <path opacity=".5" fill={color} d="M10 3.333H13.333V6.666H10z" />
      <path opacity=".75" fill={color} d="M6.667 6.667H10V10H6.667z" />
      <path opacity=".3" fill={color} d="M13.333 6.667H16.666V10H13.333z" />
      <path fill={color} d="M3.333 10H6.666V13.333H3.333z" />
      <path opacity=".5" fill={color} d="M10 10H13.333V13.333H10z" />
      <path opacity=".75" fill={color} d="M6.667 13.333H10V16.666H6.667z" />
      <path
        opacity=".3"
        d="M13.3333 13.3334H16.6666V15.9667C16.6666 16.3533 16.3532 16.6667 15.9666 16.6667H13.3333V13.3334Z"
        fill={color}
      />
    </svg>
  );
});

IconAttributeOpacityBicolorSolid.displayName =
  "IconAttributeOpacityBicolorSolid";

export default IconAttributeOpacityBicolorSolid;