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

export const IconGateway24 = 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 1c2.488 0 4.406.946 5.846 2.448 1.42 1.482 2.35 3.476 2.964 5.562 1.226 4.168 1.252 8.942 1.156 11.465C21.91 21.93 20.7 23 19.294 23H4.706c-1.409 0-2.617-1.076-2.672-2.53a48 48 0 0 1 .017-4.005.75.75 0 1 1 1.498.07 46 46 0 0 0-.016 3.88c.023.601.525 1.085 1.173 1.085h14.588c.65 0 1.15-.482 1.173-1.082.094-2.481.06-7.056-1.096-10.984-.577-1.963-1.418-3.705-2.608-4.948C15.593 3.266 14.06 2.5 12 2.5c-1.836 0-3.247.608-4.355 1.594-1.124 1-1.969 2.418-2.592 4.071a.75.75 0 0 1-1.405-.53c.676-1.79 1.635-3.448 3-4.662C8.03 1.745 9.794 1 12 1M9.207 6.482a.75.75 0 0 1 1.06-.025l5.5 5.25a.75.75 0 0 1 .233.531v.024a.75.75 0 0 1-.232.531l-5.5 5.25a.75.75 0 0 1-1.036-1.086L13.378 13H1.75a.75.75 0 0 1 0-1.5h11.628L9.232 7.543a.75.75 0 0 1-.025-1.06"
                />
            </svg>
        );
    }
);