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

export type CanvasIconProps = 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 CanvasIcon = ({ title, size, color, ...props }: CanvasIconProps) => {
  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}<g><path d="M5.612 11.982c0-1.314-.976-2.42-2.285-2.578a10.315 10.315 0 0 0 0 5.155 2.593 2.593 0 0 0 2.285-2.577m1.512-.814a.812.812 0 0 0-.819.814c0 .455.36.819.814.819.455 0 .82-.36.82-.814a.81.81 0 0 0-.815-.819m11.263.814c0 1.313.976 2.42 2.285 2.577a10.31 10.31 0 0 0 0-5.155 2.603 2.603 0 0 0-2.285 2.578m-1.515-.814a.819.819 0 1 0 .81.828v-.014c0-.445-.36-.81-.81-.814m-4.89 7.22c-1.314 0-2.42.976-2.578 2.285 1.692.436 3.464.436 5.155 0a2.6 2.6 0 0 0-2.577-2.285m0-2.326a.812.812 0 0 0-.819.814c0 .454.36.819.814.819.455 0 .819-.36.819-.814a.812.812 0 0 0-.814-.819m0-10.45c1.313 0 2.42-.976 2.577-2.285a10.315 10.315 0 0 0-5.155 0 2.6 2.6 0 0 0 2.578 2.285m0 .698a.814.814 0 1 0 0 1.627.814.814 0 0 0 0-1.627m4.521 10.193a2.597 2.597 0 0 0-.212 3.432 10.344 10.344 0 0 0 3.648-3.648 2.619 2.619 0 0 0-3.436.216m-1.647-1.646a.82.82 0 0 0 0 1.151.82.82 0 0 0 1.152 0 .82.82 0 0 0 0-1.151.82.82 0 0 0-1.152 0M7.475 7.475a2.602 2.602 0 0 0 .216-3.433 10.344 10.344 0 0 0-3.649 3.649c1.03.8 2.506.71 3.433-.216m.49.49a.82.82 0 0 0 0 1.152.82.82 0 0 0 1.152 0 .82.82 0 0 0 0-1.152.82.82 0 0 0-1.152 0m8.534-.504a2.603 2.603 0 0 0 3.432.216 10.344 10.344 0 0 0-3.648-3.648 2.602 2.602 0 0 0 .216 3.432m-.495 1.651a.812.812 0 0 0 0-1.152.812.812 0 0 0-1.152 0 .812.812 0 0 0 0 1.152.82.82 0 0 0 1.152 0M7.47 16.498a2.602 2.602 0 0 0-3.432-.216 10.355 10.355 0 0 0 3.64 3.649 2.599 2.599 0 0 0-.212-3.433zm.49-1.65a.82.82 0 0 0 0 1.151.82.82 0 0 0 1.152 0 .82.82 0 0 0 0-1.152.82.82 0 0 0-1.151 0Z" /></g><defs></defs></svg>
  );
};