import { forwardRef, useMemo } from 'react';
import { IconProps } from './types';

export const IconBug24 = forwardRef<SVGSVGElement, IconProps>(
    ({ color = 'currentColor', title, ...props }, svgRef) => {
        const titleId = useMemo(
            () =>
                title
                    ? 'title-' + Math.random().toString(36).substr(2, 9)
                    : undefined,
            [title]
        );
        return (
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width={24}
                height={24}
                fill="none"
                viewBox="0 0 24 24"
                aria-hidden={!title}
                ref={svgRef}
                aria-labelledby={titleId}
                {...props}
            >
                {title ? <title id={titleId}>{title}</title> : null}
                <path
                    fill={color}
                    fillRule="evenodd"
                    d="M15.72 1.22a.75.75 0 0 1 1.06 1.06l-1.176 1.177a4.6 4.6 0 0 1 1.293 4.256c.612.07 1.009.147 1.258.208.54.132.845.61.845 1.089v1.408l2.987-1.12a.75.75 0 0 1 .527 1.404L19 12.02v2.318l3.343.418a.75.75 0 0 1-.186 1.488L19 15.85v.4c0 .931-.194 1.816-.545 2.62l3.809 1.428a.75.75 0 0 1-.527 1.404l-4-1.5-.047-.02C16.415 21.894 14.332 23 12 23s-4.415-1.107-5.69-2.817l-.046.02-4 1.5a.75.75 0 0 1-.526-1.404l3.808-1.43A6.5 6.5 0 0 1 5 16.25v-.4l-3.156.394a.75.75 0 1 1-.187-1.488L5 14.338V12.02l-3.513-1.318a.751.751 0 0 1 .527-1.404L5 10.418V9.01c0-.479.305-.957.846-1.09.25-.06.646-.136 1.258-.207A4.6 4.6 0 0 1 7 6.75c0-1.29.536-2.445 1.396-3.293L7.22 2.28a.75.75 0 0 1 1.06-1.06L9.63 2.568A5.2 5.2 0 0 1 12 2c.852 0 1.662.205 2.371.568zM12 9c-3.227 0-4.802.187-5.5.315v6.935c0 2.87 2.434 5.25 5.5 5.25s5.5-2.38 5.5-5.25V9.315C16.802 9.187 15.227 9 12 9m0-5.5c-1.976 0-3.5 1.497-3.5 3.25q.002.436.117.836A58 58 0 0 1 12 7.5c1.4 0 2.508.034 3.384.086q.115-.4.116-.836c0-1.753-1.524-3.25-3.5-3.25"
                    clipRule="evenodd"
                />
            </svg>
        );
    }
);