import type { SVGProps } from "react";
export interface KeyboardIconProps
  extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
  className?: string;
  size?: number;
  color?: string;
}
export function KeyboardIcon({
  className = "",
  size = 24,
  color = "currentColor",
  ...props
}: KeyboardIconProps) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      fill="none"
      viewBox="0 0 24 24"
      className={className}
      {...props}
    >
      <path
        fill={color}
        d="M14 13.874a1.125 1.125 0 0 1 0 2.25h-4a1.125 1.125 0 0 1 0-2.25zM19.375 15a1.375 1.375 0 0 1-2.743.141l-.007-.14.007-.141A1.375 1.375 0 0 1 18 13.626l.141.007c.693.07 1.233.655 1.234 1.367m-12 0a1.375 1.375 0 0 1-2.743.141L4.625 15l.007-.141A1.375 1.375 0 0 1 6 13.626l.141.007c.693.07 1.233.655 1.234 1.367m0-3.998a1.374 1.374 0 0 1-2.743.14l-.007-.14.007-.141A1.375 1.375 0 0 1 6 9.625l.141.007a1.377 1.377 0 0 1 1.234 1.369Zm4 0a1.375 1.375 0 0 1-2.742.14l-.008-.14.008-.141A1.375 1.375 0 0 1 10 9.625l.14.007c.694.07 1.235.656 1.235 1.369Zm4 0a1.375 1.375 0 0 1-2.743.14l-.008-.14.008-.141A1.375 1.375 0 0 1 14 9.625l.14.007c.694.07 1.236.657 1.236 1.369Zm4 0a1.374 1.374 0 0 1-2.743.14l-.007-.14.007-.141A1.375 1.375 0 0 1 18 9.625l.141.007a1.377 1.377 0 0 1 1.234 1.369Z"
      />
      <path
        fill={color}
        d="M20.875 10c0-1.036-.84-1.875-1.875-1.875H5c-1.035 0-1.875.84-1.875 1.875v6c0 1.035.84 1.875 1.875 1.875h14c1.035 0 1.875-.84 1.875-1.876zm2.25 6A4.125 4.125 0 0 1 19 20.124H5a4.125 4.125 0 0 1-4.125-4.126v-6A4.125 4.125 0 0 1 5 5.876h5.881a3.12 3.12 0 0 1 3.119-3h1a.376.376 0 0 0 .376-.375V2a1.125 1.125 0 0 1 2.25 0v.5A2.625 2.625 0 0 1 15 5.125h-1a.87.87 0 0 0-.861.75h5.86A4.125 4.125 0 0 1 23.126 10v6Z"
      />
    </svg>
  );
}
