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

export const IconTextColor2Outline = 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-text-color-2-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M12.1162 10.3478C12.5363 9.38379 13.9465 9.39301 14.3339 10.4073L16.8017 16.8692L16.8388 17.006C16.8913 17.327 16.7131 17.6519 16.3974 17.7726C16.0817 17.8927 15.7323 17.7694 15.5576 17.4952L15.4941 17.3683L14.8417 15.6593H11.7587L11.1757 17.3478C11.0491 17.7125 10.6501 17.9064 10.2851 17.7804C9.92033 17.6542 9.72626 17.2557 9.85151 16.8907L12.079 10.4435L12.1162 10.3478ZM12.2421 14.2589H14.3066L13.2226 11.42L12.2421 14.2589Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
        <path
          d="M6.55268 2.9835C8.3315 2.39639 10.2229 2.51698 11.5253 2.97666L11.7783 3.07237L11.8476 3.10557C12.1821 3.28532 12.3332 3.69311 12.1855 4.05186C12.0276 4.43457 11.5888 4.61662 11.206 4.45908C10.2335 4.05834 8.57721 3.89418 7.0224 4.40733C5.51172 4.90611 4.10027 6.04026 3.49213 8.27158C3.10027 9.70998 3.24792 10.858 3.66596 11.7579C4.08932 12.6686 4.81813 13.3839 5.6728 13.8927C6.52996 14.4028 7.48347 14.6871 8.30268 14.753C8.8679 14.7984 9.29124 14.7337 9.57319 14.6329L9.01264 16.254C8.73719 16.2722 8.45732 16.2702 8.18256 16.2481C7.13426 16.1638 5.95918 15.809 4.90522 15.1817C3.8487 14.5528 2.8816 13.6298 2.30561 12.3907C1.72472 11.1407 1.56851 9.62543 2.04487 7.87705C2.79776 5.11455 4.61073 3.62456 6.55268 2.9835Z"
          fill={color}
        />
        <path
          d="M5.65424 10.1954C6.19474 10.1954 6.63266 10.6334 6.63276 11.1739 6.63276 11.7145 6.1948 12.1524 5.65424 12.1524 5.11371 12.1524 4.67572 11.7145 4.67572 11.1739 4.67582 10.6335 5.11377 10.1955 5.65424 10.1954ZM16.2128 6.52647C17.1583 7.93185 17.3823 9.32827 16.6152 10.464 16.391 10.7958 16.097 11.0774 15.7509 11.3155L15.2685 10.0499C15.2418 9.98013 15.2113 9.91331 15.1796 9.84873 15.2548 9.77473 15.3202 9.70076 15.372 9.62412 15.6558 9.20385 15.74 8.50973 14.9687 7.36338L15.5908 6.94541 16.2128 6.52647ZM15.6181 2.30576C15.911 2.01292 16.3858 2.01289 16.6787 2.30576 16.9712 2.59867 16.9714 3.07352 16.6787 3.36631L10.8652 9.17979C10.5724 9.47242 10.0975 9.47229 9.80463 9.17979 9.51179 8.88694 9.51188 8.41214 9.80463 8.11924L15.6181 2.30576ZM5.95307 6.98936C6.49361 6.98938 6.93158 7.42733 6.93158 7.96787 6.93155 8.50839 6.49359 8.94636 5.95307 8.94639 5.41253 8.94639 4.97459 8.50841 4.97455 7.96787 4.97455 7.42731 5.41251 6.98936 5.95307 6.98936Z"
          fill={color}
        />
        <path
          d="M15.1718 6.32237C15.5154 6.09161 15.9817 6.18314 16.2128 6.52647L14.9687 7.36338C14.7376 7.01975 14.8282 6.55356 15.1718 6.32237ZM8.60248 5.16416C9.14291 5.16416 9.58077 5.60231 9.581 6.14268 9.581 6.68324 9.14305 7.12217 8.60248 7.12217 8.06195 7.12213 7.62397 6.68322 7.62397 6.14268 7.6242 5.60233 8.06209 5.1642 8.60248 5.16416Z"
          fill={color}
        />
      </svg>
    );
  }
);

IconTextColor2Outline.displayName = "IconTextColor2Outline";

export default IconTextColor2Outline;