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

export const IconToolColorOutline = 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-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M17.1927 4.30177C17.4905 4.00397 17.4905 3.52115 17.1927 3.22335C16.8949 2.92555 16.4121 2.92555 16.1143 3.22335L10.2371 9.10054C9.93931 9.39834 9.9393 9.88117 10.2371 10.179C10.5349 10.4768 11.0177 10.4768 11.3155 10.179L17.1927 4.30177Z"
          fill={color}
        />
        <path
          d="M12.3754 3.5354C12.3757 3.53553 12.3761 3.53566 12.1076 4.2417L12.3754 3.5354C12.769 3.6851 12.9675 4.12583 12.8178 4.51948C12.6683 4.91258 12.2288 5.11034 11.8356 4.9618L11.8345 4.9614C11.8342 4.9613 11.834 4.96118 12.105 4.24847L11.8345 4.9614L11.8305 4.95995L11.801 4.94948C11.7728 4.93972 11.7281 4.92473 11.6684 4.90627C11.5489 4.86932 11.3704 4.81877 11.1457 4.76855C10.694 4.66766 10.0668 4.57069 9.36174 4.5828C7.96138 4.60687 6.29154 5.05483 5.01615 6.74226C2.61686 9.91669 3.77 13.6991 6.94234 14.9661C8.67041 15.6562 9.70447 15.5395 10.2946 15.228C10.8818 14.9181 11.2307 14.3083 11.3523 13.5587C11.4457 12.9828 11.6641 12.515 12.02 12.1545C12.3653 11.8046 12.7842 11.6131 13.1737 11.4856C13.4673 11.3894 13.7977 11.3145 14.1011 11.2456L14.1022 11.2454C14.1852 11.2265 14.2671 11.2079 14.3448 11.1897C14.7307 11.0991 15.0979 10.9997 15.4545 10.8459C15.9039 10.652 16.1729 10.2809 16.2442 9.79434C16.3179 9.29134 16.1786 8.63099 15.7025 7.95828C15.4592 7.6145 15.5407 7.1386 15.8845 6.89531C16.2282 6.65203 16.7041 6.73349 16.9474 7.07726C17.6082 8.01093 17.8934 9.05892 17.7532 10.0156C17.6105 10.9887 17.0269 11.8285 16.0586 12.2463C15.5762 12.4544 15.1041 12.578 14.6935 12.6744C14.5858 12.6997 14.4852 12.7226 14.3904 12.7442C14.1027 12.8096 13.8679 12.8631 13.6483 12.935C13.3711 13.0258 13.21 13.1199 13.1054 13.2258C13.0114 13.321 12.9102 13.4793 12.8577 13.8029C12.6875 14.8522 12.1507 15.9729 11.0065 16.5768C9.86537 17.1791 8.32257 17.1596 6.37669 16.3824C2.20114 14.7148 0.838812 9.7398 3.79946 5.82267C5.43667 3.65653 7.61544 3.08747 9.33553 3.05791C10.1907 3.04321 10.9416 3.16027 11.4782 3.28012C11.7474 3.34027 11.9655 3.40176 12.1191 3.44926C12.1959 3.47303 12.2568 3.49337 12.3002 3.50838C12.3218 3.51588 12.3391 3.52207 12.3518 3.52669L12.3675 3.53243L12.3726 3.53437L12.3754 3.5354Z"
          fill={color}
        />
        <path
          d="M10.282 6.70116C10.282 7.2968 9.79911 7.77966 9.20348 7.77966 8.60784 7.77966 8.12498 7.2968 8.12498 6.70116 8.12498 6.10552 8.60784 5.62266 9.20348 5.62266 9.79911 5.62266 10.282 6.10552 10.282 6.70116ZM6.55208 9.61357C7.14772 9.61357 7.63058 9.13071 7.63058 8.53507 7.63058 7.93944 7.14772 7.45657 6.55208 7.45657 5.95644 7.45657 5.47358 7.93944 5.47358 8.53507 5.47358 9.13071 5.95644 9.61357 6.55208 9.61357ZM7.26705 11.8358C7.26705 12.4314 6.78419 12.9143 6.18855 12.9143 5.59291 12.9143 5.11005 12.4314 5.11005 11.8358 5.11005 11.2401 5.59291 10.7573 6.18855 10.7573 6.78419 10.7573 7.26705 11.2401 7.26705 11.8358Z"
          fill={color}
        />
      </svg>
    );
  }
);

IconToolColorOutline.displayName = "IconToolColorOutline";

export default IconToolColorOutline;