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

export const IconCodepen24 = 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}
                <g fill={color}>
                    <path d="M6.368 11.023v1.954L7.828 12zM11.414 9.6V6.874L6.833 9.93l2.046 1.368zM17.163 9.93 12.58 6.874V9.6l2.535 1.698zM6.833 14.074l4.581 3.052V14.4l-2.535-1.698zM12.581 14.4v2.726l4.582-3.052-2.047-1.372zM12 10.619 9.93 12 12 13.381 14.065 12z" />
                    <path d="M12 1C5.926 1 1 5.926 1 12s4.926 11 11 11 11-4.926 11-11S18.074 1 12 1m6.8 13.074q.001.041-.005.075c0 .01-.004.018-.004.023-.005.019-.005.033-.01.051-.004.01-.004.019-.009.028l-.014.042-.014.028c-.005.014-.014.028-.018.037q-.007.015-.019.028c-.01.014-.014.023-.023.037a.1.1 0 0 1-.019.024c-.01.009-.018.023-.028.032l-.023.023q-.017.015-.033.028-.014.01-.027.019c-.005 0-.005.005-.01.01l-6.223 4.148a.592.592 0 0 1-.651 0L5.45 14.563c-.004 0-.004-.005-.01-.01-.008-.004-.018-.014-.027-.018q-.016-.015-.033-.028l-.023-.023q-.014-.013-.028-.033c-.004-.01-.014-.018-.018-.023a.1.1 0 0 1-.024-.037.1.1 0 0 0-.018-.028q-.013-.022-.019-.037l-.014-.028-.014-.042c-.004-.01-.004-.019-.01-.028a.2.2 0 0 1-.008-.051c0-.01-.005-.019-.005-.024q-.006-.036-.005-.074V9.935q-.001-.04.005-.075c0-.009.005-.018.005-.023.004-.018.004-.032.009-.051.005-.01.005-.019.01-.028l.013-.042.014-.028c.005-.014.014-.028.019-.037a.1.1 0 0 1 .018-.028l.024-.037c.004-.01.014-.019.018-.023q.015-.017.028-.033l.023-.023c.01-.01.024-.019.033-.028q.015-.01.028-.019c.005 0 .005-.004.01-.009l6.218-4.144a.58.58 0 0 1 .646 0l6.219 4.144c.005 0 .005.005.01.01.008.004.018.013.027.018q.017.015.033.028l.023.023q.014.014.028.033.014.015.018.023.016.015.024.037.005.015.018.028a.1.1 0 0 1 .019.037l.014.028.014.042c.004.01.004.019.01.028q.007.023.008.051c0 .01.005.019.005.023.005.024.005.052.005.075v4.14z" />
                    <path d="M17.633 12.977v-1.954L16.167 12z" />
                </g>
            </svg>
        );
    }
);