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

export const IconCloud24 = 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="M5.835 3.558a8.87 8.87 0 0 1 9.252 1.925 9 9 0 0 1 2.325 3.705h.725c1.556 0 3.05.625 4.148 1.733a5.933 5.933 0 0 1 0 8.348A5.85 5.85 0 0 1 18.137 21H8.928a8.9 8.9 0 0 1-4.72-1.361 9 9 0 0 1-3.295-3.675 9.07 9.07 0 0 1 .953-9.471 8.95 8.95 0 0 1 3.97-2.936m4.591 1.096a7.37 7.37 0 0 0-4.074.313l-.008.003a7.44 7.44 0 0 0-3.288 2.438 7.55 7.55 0 0 0-.795 7.9 7.5 7.5 0 0 0 2.744 3.061 7.4 7.4 0 0 0 3.93 1.132h9.202a4.35 4.35 0 0 0 3.083-1.288 4.436 4.436 0 0 0 0-6.237 4.35 4.35 0 0 0-3.083-1.288H16.85a.75.75 0 0 1-.726-.564 7.5 7.5 0 0 0-2.075-3.559 7.4 7.4 0 0 0-3.622-1.91"
                    clipRule="evenodd"
                />
            </svg>
        );
    }
);