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

export const IconToolColorSwatchOutline = 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-tool-color-swatch-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M2 3.52601C2 2.68322 2.68322 2 3.52601 2H8.15029C8.99308 2 9.6763 2.68322 9.6763 3.52601V5.13935L11.2796 3.53608C11.8755 2.94013 12.8417 2.94013 13.4377 3.53608L16.7075 6.80594C17.3035 7.40188 17.3035 8.3681 16.7075 8.96404L14.8855 10.7861H16.474C17.3168 10.7861 18 11.4693 18 12.3121V16.474C18 17.3168 17.3168 18 16.474 18H3.52601C2.68322 18 2 17.3168 2 16.474V3.52601ZM3.52601 16.7977H8.15029C8.32906 16.7977 8.47399 16.6528 8.47399 16.474V3.52601C8.47399 3.34724 8.32906 3.20231 8.15029 3.20231H3.52601C3.34724 3.20231 3.20231 3.34724 3.20231 3.52601V16.474C3.20231 16.6528 3.34724 16.7977 3.52601 16.7977ZM9.6419 16.7977H16.474C16.6528 16.7977 16.7977 16.6528 16.7977 16.474V12.3121C16.7977 12.1334 16.6528 11.9884 16.474 11.9884H13.6832L9.6763 15.9954V16.474C9.6763 16.5851 9.66443 16.6934 9.6419 16.7977ZM9.6763 14.295L15.8574 8.11388C15.9838 7.98747 15.9838 7.78251 15.8574 7.6561L12.5875 4.38624C12.4611 4.25983 12.2561 4.25983 12.1297 4.38624L9.6763 6.83968V14.295Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
        <path
          d="M6.76301 14.6243C6.76301 15.1351 6.34893 15.5491 5.83815 15.5491C5.32737 15.5491 4.9133 15.1351 4.9133 14.6243C4.9133 14.1135 5.32737 13.6994 5.83815 13.6994C6.34893 13.6994 6.76301 14.1135 6.76301 14.6243Z"
          fill={color}
        />
      </svg>
    );
  }
);

IconToolColorSwatchOutline.displayName = "IconToolColorSwatchOutline";

export default IconToolColorSwatchOutline;