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

export const IconTextWordsOutline = 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-words-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M12.8311 5.47461C13.2453 5.47461 13.5811 5.8104 13.5811 6.22461V13.7754C13.581 14.0981 13.3746 14.3852 13.0684 14.4873C12.7622 14.5891 12.425 14.4837 12.2314 14.2256L9.99902 11.25L7.76758 14.2256C7.57384 14.4836 7.23676 14.5893 6.93066 14.4873C6.62468 14.3851 6.41805 14.098 6.41797 13.7754V6.22461C6.41797 5.81052 6.75393 5.47482 7.16797 5.47461C7.58218 5.47461 7.91797 5.8104 7.91797 6.22461V11.5254L9.39941 9.5498L9.45605 9.4834C9.59666 9.33548 9.79342 9.2501 10 9.25C10.2358 9.25011 10.458 9.36124 10.5996 9.5498L12.0811 11.5244V6.22461C12.0811 5.81061 12.4171 5.47495 12.8311 5.47461Z"
          fill={color}
        />
        <path
          d="M15 2.25C16.5188 2.25 17.75 3.48122 17.75 5V15C17.75 16.5188 16.5188 17.75 15 17.75H5C3.48122 17.75 2.25 16.5188 2.25 15V5C2.25 3.48122 3.48122 2.25 5 2.25H15ZM5 3.75C4.30964 3.75 3.75 4.30964 3.75 5V15C3.75 15.6904 4.30964 16.25 5 16.25H15C15.6904 16.25 16.25 15.6904 16.25 15V5C16.25 4.30964 15.6904 3.75 15 3.75H5Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconTextWordsOutline.displayName = "IconTextWordsOutline";

export default IconTextWordsOutline;