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 8l-.93-.622zM7.627 6.473V4.738L4.712 6.683l1.302.87 1.613-1.08zM11.285 6.683L8.37 4.738v1.735l1.613 1.08 1.302-.87zM4.712 9.32l2.915 1.942V9.527l-1.613-1.08-1.302.873zM8.37 9.527v1.735l2.915-1.942-1.302-.873-1.613 1.08zM8 7.12L6.683 8 8 8.879 9.314 8 8 7.12z" />
                    <path d="M8 1a7 7 0 10.001 14.001A7 7 0 008 1zm4.327 8.32c0 .018 0 .033-.003.047 0 .006-.003.012-.003.015l-.006.033c-.002.006-.002.012-.005.018l-.01.026-.008.018c-.003.009-.01.018-.012.024a.06.06 0 01-.012.017l-.015.024a.065.065 0 01-.012.015c-.005.006-.011.015-.017.02l-.015.015c-.006.006-.015.012-.02.018-.007.003-.013.009-.019.012-.003 0-.003.003-.005.006l-3.96 2.64a.377.377 0 01-.414 0L3.832 9.631c-.003 0-.003-.003-.006-.006l-.018-.012c-.006-.006-.015-.012-.02-.018l-.016-.014a.129.129 0 01-.017-.021c-.003-.006-.01-.012-.012-.015a.064.064 0 01-.015-.024.062.062 0 00-.012-.017l-.012-.024-.009-.018-.008-.026-.006-.018a.106.106 0 01-.006-.033c0-.006-.003-.012-.003-.015-.003-.014-.003-.032-.003-.047V6.686c0-.018 0-.033.003-.048 0-.005.003-.011.003-.014l.006-.033.006-.018.008-.026.01-.018c.002-.009.008-.018.011-.024a.062.062 0 01.012-.017l.015-.024a.065.065 0 01.012-.015c.006-.006.011-.015.017-.02l.015-.015c.006-.006.015-.012.02-.018.007-.003.013-.01.019-.012.003 0 .003-.003.006-.006L7.79 3.741a.372.372 0 01.411 0l3.958 2.637c.002 0 .002.003.005.006l.018.012.021.018.015.014c.006.006.012.012.018.021l.011.015a.065.065 0 01.015.024.06.06 0 00.012.017.087.087 0 01.012.024l.009.018.009.026c.003.006.003.012.005.018.004.009.006.02.006.033 0 .006.003.012.003.014a.251.251 0 01.003.048V9.32h.006z" />
                    <path d="M11.584 8.622V7.378L10.652 8l.932.622z" />
                </g>
            </svg>
        );
    }
);
