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

export const IconEye24 = 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}
                    d="M12 3c3.864 0 6.86 2.087 8.85 4.162 1 1.042 1.767 2.1 2.286 2.936.259.417.46.785.6 1.074.069.143.127.275.17.388q.03.086.057.177c.013.048.037.147.037.263s-.024.215-.037.263q-.025.09-.058.177c-.042.113-.1.245-.17.388-.139.289-.34.657-.6 1.074a18 18 0 0 1-2.284 2.936C18.859 18.913 15.864 21 12 21s-6.86-2.087-8.85-4.162c-1-1.042-1.767-2.1-2.286-2.936-.259-.417-.46-.785-.6-1.074a5 5 0 0 1-.17-.388 2 2 0 0 1-.057-.177A1 1 0 0 1 0 12c0-.116.024-.215.037-.263q.025-.09.058-.177c.042-.113.1-.245.17-.388.139-.289.34-.657.6-1.074a18 18 0 0 1 2.284-2.936C5.141 5.087 8.136 3 12 3m0 1.5c-3.295 0-5.924 1.78-7.769 3.701a16.7 16.7 0 0 0-2.093 2.688c-.236.38-.41.701-.523.934q-.05.105-.08.177.03.072.08.177c.113.233.287.554.523.934.472.76 1.176 1.732 2.093 2.688C6.076 17.72 8.705 19.5 12 19.5s5.924-1.78 7.769-3.701a16.7 16.7 0 0 0 2.093-2.688c.236-.38.41-.701.523-.934q.05-.105.08-.177a4 4 0 0 0-.08-.177 10 10 0 0 0-.523-.934A16.7 16.7 0 0 0 19.77 8.2C17.925 6.28 15.295 4.5 12 4.5M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8m0 1.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5"
                />
            </svg>
        );
    }
);