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

export const IconSlackColor16 = 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={16}
                height={16}
                fill="none"
                viewBox="0 0 16 16"
                aria-hidden={!title}
                ref={svgRef}
                aria-labelledby={titleId}
                {...props}
            >
                {title ? <title id={titleId}>{title}</title> : null}
                <g fillRule="evenodd" clipRule="evenodd">
                    <path
                        fill="#e01e5a"
                        d="M2.471 11.318a1.474 1.474 0 0 0 1.47-1.471v-1.47h-1.47A1.474 1.474 0 0 0 1 9.846c.001.811.659 1.469 1.47 1.47m3.682-2.942a1.474 1.474 0 0 0-1.47 1.471v3.683c.002.811.659 1.468 1.47 1.47a1.474 1.474 0 0 0 1.47-1.47V9.846a1.474 1.474 0 0 0-1.47-1.47"
                    />
                    <path
                        fill="#36c5f0"
                        d="M4.683 2.471c.001.811.659 1.469 1.47 1.47h1.47v-1.47A1.474 1.474 0 0 0 6.154 1a1.474 1.474 0 0 0-1.47 1.47m2.94 3.682a1.474 1.474 0 0 0-1.47-1.47H2.47A1.474 1.474 0 0 0 1 6.153c.002.812.66 1.469 1.47 1.47h3.684a1.474 1.474 0 0 0 1.47-1.47"
                    />
                    <path
                        fill="#2eb67d"
                        d="M9.847 7.624a1.474 1.474 0 0 0 1.47-1.47V2.47A1.474 1.474 0 0 0 9.848 1a1.474 1.474 0 0 0-1.47 1.47v3.684c.002.81.659 1.468 1.47 1.47m3.682-2.941a1.474 1.474 0 0 0-1.47 1.47v1.47h1.47A1.474 1.474 0 0 0 15 6.154a1.474 1.474 0 0 0-1.47-1.47"
                    />
                    <path
                        fill="#ecb22e"
                        d="M8.377 9.847c.002.811.659 1.469 1.47 1.47h3.683A1.474 1.474 0 0 0 15 9.848a1.474 1.474 0 0 0-1.47-1.47H9.847a1.474 1.474 0 0 0-1.47 1.47m2.94 3.682a1.474 1.474 0 0 0-1.47-1.47h-1.47v1.47c.002.812.659 1.469 1.47 1.47a1.474 1.474 0 0 0 1.47-1.47"
                    />
                </g>
            </svg>
        );
    }
);