import { useId, type SVGProps } from 'react';

export type AllIconProps = SVGProps<SVGSVGElement> & {
  /** Accessibility title for the icon, set aria-hidden="true" if the icon is purely decorative. */
  title?: string;
  /**
   * The size of the icon.
   * It sets the font-size, possible as the width and height is `1em`. If not set, the icon will inherit the font size of its parent.
   */
  size?: '2xl' | 'xl' | 'large' | 'medium' | 'small';
  /**
   * The color of the icon.
   * @default 'inherit'
   */
  color?: 'inherit' | 'primary' | 'gray' | 'black' | 'white';
};

export const AllIcon = ({ title, size, color, ...props }: AllIconProps) => {
  const titleId = useId();
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" focusable='false' role='img' width='1em' height='1em'  aria-labelledby={title ? titleId : undefined} data-size={size} data-color={color} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path d="M9.715 16.386c0-1.159-.943-2.1-2.102-2.1h-2.1v4.2h2.1a2.104 2.104 0 0 0 2.102-2.1m10.271-3.6v7.2h-7.2v-7.2zm-5.7 5.7h4.2v-4.2h-4.2zM11.214 4.014v7.202H4.013V4.013h7.202Zm7.271 3.6a2.1 2.1 0 1 0-4.2 0 2.1 2.1 0 0 0 4.2 0M5.513 9.716h4.202V5.513H5.513v4.202Zm5.702 6.671c0 1.987-1.615 3.6-3.602 3.6h-3.6v-7.2h3.6a3.603 3.603 0 0 1 3.602 3.6m8.771-8.772a3.601 3.601 0 1 1-7.202 0 3.601 3.601 0 0 1 7.202 0" /></svg>
  );
};