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

export const IconToolRecordingOutline = 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-recording-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M6.33331 4.58329C6.33331 2.55825 7.97494 0.916626 9.99998 0.916626C12.025 0.916626 13.6666 2.55825 13.6666 4.58329V9.99996C13.6666 12.025 12.025 13.6666 9.99998 13.6666C7.97494 13.6666 6.33331 12.025 6.33331 9.99996V4.58329ZM9.99998 2.41663C8.80336 2.41663 7.83331 3.38668 7.83331 4.58329V9.99996C7.83331 11.1966 8.80336 12.1666 9.99998 12.1666C11.1966 12.1666 12.1666 11.1966 12.1666 9.99996V4.58329C12.1666 3.38668 11.1966 2.41663 9.99998 2.41663Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
        <path
          d="M3.75 8.83337C4.16421 8.83337 4.5 9.16916 4.5 9.58337C4.5 12.621 6.96242 15.0834 10 15.0834C13.0376 15.0834 15.5 12.621 15.5 9.58337C15.5 9.16916 15.8358 8.83337 16.25 8.83337C16.6642 8.83337 17 9.16916 17 9.58337C17 13.196 14.2633 16.1694 10.75 16.5437V18.3334C10.75 18.7476 10.4142 19.0834 10 19.0834C9.58579 19.0834 9.25 18.7476 9.25 18.3334V16.5437C5.73667 16.1694 3 13.196 3 9.58337C3 9.16916 3.33579 8.83337 3.75 8.83337Z"
          fill={color}
        />
      </svg>
    );
  }
);

IconToolRecordingOutline.displayName = "IconToolRecordingOutline";

export default IconToolRecordingOutline;