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

export type InstagramIconProps = 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 InstagramIcon = ({ title, size, color, ...props }: InstagramIconProps) => {
  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 fillRule="evenodd" d="M12 22.5c5.799 0 10.5-4.701 10.5-10.5S17.799 1.5 12 1.5 1.5 6.201 1.5 12 6.201 22.5 12 22.5m0 1.5c6.6274 0 12-5.3726 12-12S18.6274 0 12 0 0 5.3726 0 12s5.3726 12 12 12" clipRule="evenodd" /><g><path d="M9.1008 5.0494c-.7448.0351-1.2534.154-1.698.3287-.4603.1793-.8503.42-1.2384.8095s-.627.7798-.8051 1.2407c-.1724.4456-.2891.9546-.322 1.6998-.033.7453-.0402.9848-.0366 2.8857.0037 1.9009.012 2.1392.0482 2.886.0356.7446.154 1.2531.3287 1.6979.1796.4602.42.8501.8096 1.2383s.7797.6266 1.2417.805c.4452.172.9544.2894 1.6994.322s.9849.0402 2.8853.0365c1.9004-.0036 2.1396-.012 2.8862-.0474.7467-.0355 1.2525-.1547 1.6974-.3286.4602-.1801.8504-.42 1.2383-.8098s.6268-.7803.8047-1.2415c.1725-.4452.2897-.9544.322-1.6989.0326-.7472.0403-.9857.0367-2.8864s-.0122-2.1389-.0476-2.8854c-.0354-.7464-.154-1.2534-.3286-1.6984-.1799-.4602-.42-.8498-.8095-1.2384-.3894-.3884-.7803-.6271-1.2413-.8047-.4455-.1723-.9544-.2898-1.6995-.322s-.9849-.0404-2.886-.0368c-1.901.0037-2.139.0118-2.8856.0482m.0817 12.6543c-.6825-.0297-1.053-.1431-1.3-.238-.327-.126-.56-.2783-.8061-.5221-.2461-.2437-.3973-.4775-.525-.8039-.096-.2469-.2114-.6171-.2434-1.2996-.0347-.7376-.042-.9591-.046-2.828s.003-2.09.0354-2.828c.0291-.682.1432-1.053.238-1.2997.126-.3275.2778-.56.522-.806.2444-.246.4775-.3975.804-.5251.2468-.0964.617-.2109 1.2992-.2434.7382-.035.9594-.042 2.8279-.046s2.0904.003 2.8289.0354c.6819.0297 1.0531.1427 1.2996.238.3272.126.56.2773.806.522s.3976.477.5253.8043c.0964.246.2109.616.2431 1.2987.0352.7382.0432.9595.0465 2.828.0034 1.8684-.0032 2.0903-.0355 2.828-.0299.6825-.143 1.0532-.238 1.3004-.126.3269-.2779.56-.5224.8059s-.4772.3973-.804.525c-.2464.0962-.617.211-1.2986.2434-.7383.0348-.9595.042-2.8287.0461s-2.0898-.0035-2.828-.0354m5.7064-9.4446a.8397.8397 0 0 0 1.0053.8222.84.84 0 0 0 .6588-.6612.8399.8399 0 1 0-1.6641-.161m-6.4834 3.7483c.0039 1.9852 1.6161 3.5908 3.6009 3.587 1.9848-.0037 3.5916-1.6158 3.5878-3.601s-1.6165-3.5913-3.6015-3.5874c-1.9851.004-3.591 1.6164-3.5872 3.6014m1.2608-.0026a2.3334 2.3334 0 1 1 4.6667-.0092 2.3334 2.3334 0 0 1-4.6667.0092" /></g><defs></defs></svg>
  );
};