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

export const IconCompositeOutline = 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-shein-icon customeow-shein-icon-icon-composite-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M7.5 6H11.5V7.5H7.9C7.67909 7.5 7.5 7.67909 7.5 7.9V11.5H6V7.5C6 6.67157 6.67157 6 7.5 6Z"
          fill={color}
        />
        <path
          d="M2 3.5C2 2.67157 2.67157 2 3.5 2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H3.5C2.67157 14 2 13.3284 2 12.5V3.5ZM12.1 3.5C12.3209 3.5 12.5 3.67909 12.5 3.9V12.1C12.5 12.3209 12.3209 12.5 12.1 12.5H3.9C3.67909 12.5 3.5 12.3209 3.5 12.1V3.9C3.5 3.67909 3.67909 3.5 3.9 3.5H12.1Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
        <path
          d="M7.5 16.1V15H6V16.5C6 17.3284 6.67157 18 7.5 18H16.5C17.3284 18 18 17.3284 18 16.5V7.5C18 6.67157 17.3284 6 16.5 6H15V7.5H16.1C16.3209 7.5 16.5 7.67909 16.5 7.9V16.1C16.5 16.3209 16.3209 16.5 16.1 16.5H7.9C7.67909 16.5 7.5 16.3209 7.5 16.1Z"
          fill={color}
        />
      </svg>
    );
  }
);

IconCompositeOutline.displayName = "IconCompositeOutline";

export default IconCompositeOutline;