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

export const IconSlack16 = 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 fill={color} fillRule="evenodd" clipRule="evenodd">
                    <path 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.47M4.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.47M9.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.47M8.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>
        );
    }
);