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

export const IconKeysZOutline = 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-keys-z-outline`,
    };
    return (
      <svg
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        {...props}
        ref={forwardedRef}
      >
        <path
          d="M4.23628 3.92847C4.23628 3.51425 4.57206 3.17847 4.98628 3.17847H15.0137C15.3041 3.17847 15.5684 3.34612 15.6922 3.60883C15.816 3.87154 15.7769 4.18209 15.592 4.40602L6.57826 15.3216H15.0137C15.4279 15.3216 15.7637 15.6574 15.7637 16.0716C15.7637 16.4858 15.4279 16.8216 15.0137 16.8216H4.98628C4.69587 16.8216 4.43156 16.654 4.3078 16.3913C4.18403 16.1285 4.22305 15.818 4.40796 15.5941L13.4217 4.67847H4.98628C4.57206 4.67847 4.23628 4.34268 4.23628 3.92847Z"
          fill={color}
          fillRule="evenodd"
          clipRule="evenodd"
        />
      </svg>
    );
  }
);

IconKeysZOutline.displayName = "IconKeysZOutline";

export default IconKeysZOutline;