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

export const IconPhone24 = 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="M7.778 2.817a1.314 1.314 0 00-.869-.317H3.81a1.316 1.316 0 00-1.241.89c-.058.17-.08.351-.064.53.327 3.06 1.37 6 3.047 8.583 1.684 2.595 3.374 4.276 5.963 5.951a19.676 19.676 0 008.56 3.041 1.316 1.316 0 001.315-.78c.073-.166.11-.346.11-.528v-.1c-.003-.528-.012-2.53 0-3.008a1.305 1.305 0 00-1.125-1.326 14.005 14.005 0 01-3.057-.76h-.001a1.315 1.315 0 00-1.383.292l-.002.002-1.306 1.303a.75.75 0 01-.9.122 17.225 17.225 0 01-6.466-6.454.75.75 0 01.122-.902L8.69 8.051a1.306 1.306 0 00.294-1.377v-.001a13.937 13.937 0 01-.763-3.051 1.306 1.306 0 00-.442-.805zM6.898 1a2.814 2.814 0 012.808 2.414v.007c.124.932.352 1.846.681 2.726l-.702.263.702-.264a2.804 2.804 0 01-.633 2.962l-.003.003-.896.895a15.726 15.726 0 005.123 5.112l.9-.899a2.813 2.813 0 012.965-.632c.882.329 1.798.557 2.731.68h.007A2.812 2.812 0 0123 17.117c-.011.451-.002 2.42 0 2.96v.104a2.805 2.805 0 01-1.91 2.671c-.371.125-.764.172-1.154.137l-.013-.002a21.173 21.173 0 01-9.222-3.274c-2.765-1.79-4.606-3.62-6.406-6.393a21.082 21.082 0 01-3.281-9.248L1.01 4.06a2.803 2.803 0 011.665-2.82A2.815 2.815 0 013.81 1h3.09z"
                    clipRule="evenodd"
                />
            </svg>
        );
    }
);
