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

export const IconCodepen16 = 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}>
                    <path d="M4.416 7.378v1.244L5.346 8zM7.627 6.473V4.738L4.712 6.683l1.302.87zM11.285 6.683 8.37 4.738v1.735l1.613 1.08zM4.712 9.32l2.915 1.942V9.527l-1.613-1.08zM8.37 9.527v1.735l2.915-1.942-1.302-.873zM8 7.12 6.683 8 8 8.879 9.314 8z" />
                    <path d="M8 1a7 7 0 1 0 .001 14.001A7 7 0 0 0 8 1m4.327 8.32q0 .027-.003.047-.002.01-.003.015l-.006.033q-.002.009-.005.018l-.01.026-.008.018c-.003.009-.01.018-.012.024l-.012.017-.015.024-.012.015q-.008.01-.017.02l-.015.015q-.01.009-.02.018-.01.006-.019.012-.003 0-.005.006l-3.96 2.64a.377.377 0 0 1-.414 0L3.832 9.631q-.003 0-.006-.006l-.018-.012q-.01-.009-.02-.018l-.016-.014-.017-.021c-.003-.006-.01-.012-.012-.015a.1.1 0 0 1-.015-.024l-.012-.017-.012-.024-.009-.018-.008-.026-.006-.018a.1.1 0 0 1-.006-.033q-.001-.01-.003-.015-.004-.023-.003-.047V6.686q0-.026.003-.048.002-.008.003-.014l.006-.033.006-.018.008-.026.01-.018q.005-.014.011-.024l.012-.017.015-.024.012-.015q.009-.01.017-.02l.015-.015q.01-.009.02-.018c.007-.003.013-.01.019-.012q.003 0 .006-.006L7.79 3.741a.37.37 0 0 1 .411 0l3.958 2.637q.002 0 .005.006l.018.012.021.018.015.014q.009.008.018.021l.011.015a.1.1 0 0 1 .015.024l.012.017a.1.1 0 0 1 .012.024l.009.018.009.026q.003.009.005.018.006.013.006.033.002.01.003.014a.3.3 0 0 1 .003.048V9.32z" />
                    <path d="M11.584 8.622V7.378L10.652 8z" />
                </g>
            </svg>
        );
    }
);
