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

export type HomeIconProps = 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 HomeIcon = ({ title, size, color, ...props }: HomeIconProps) => {
  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="m18.501 14.327.008-2.62-6.473-6.186-6.477 6.19v5.293c0 .795.644 1.44 1.436 1.44h10.06a1.44 1.44 0 0 0 1.437-1.44zm1.491 2.677a2.94 2.94 0 0 1-2.937 2.94H6.995a2.939 2.939 0 0 1-2.936-2.94v-5.35c0-.186.038-.365.104-.526l.007-.017.008-.017c.07-.15.168-.292.293-.417l.011-.011 6.57-6.28.008-.007c.125-.116.28-.217.453-.285l.124-.042a1.434 1.434 0 0 1 1.276.243l.1.084.008.007 6.561 6.272c.107.1.194.213.26.33l.06.12.003.009.003.008c.043.104.087.245.099.402l.003.028v.099L20 14.332l-.009 2.672Z" /></svg>
  );
};