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

export const IconCodepenColor16 = 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}
                <path
                    fill="#000"
                    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
                    fill="#000"
                    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 fill="#000" d="M11.584 8.622V7.378L10.652 8z" />
                <path
                    fill="#fff"
                    fillRule="evenodd"
                    d="M12.327 9.32q0 .027-.003.047 0 .006-.002.01v.005l-.004.017q0 .005-.002.011v.005l-.004.009q0 .003-.002.006v.003l-.01.026-.008.018-.009.018-.003.006-.012.017-.003.005-.004.007-.008.012-.012.015-.008.01q-.005.006-.01.01l-.014.015-.01.01-.01.008-.01.006-.009.006-.003.003-.002.003-3.96 2.64a.377.377 0 0 1-.414 0L3.832 9.631l-.004-.003-.002-.003-.01-.006-.008-.006-.01-.009-.01-.009-.016-.014-.017-.021c-.003-.006-.01-.012-.012-.015a.1.1 0 0 1-.015-.024l-.012-.017-.009-.018-.003-.006-.009-.018-.008-.026-.004-.01q0-.003-.002-.008a.1.1 0 0 1-.006-.033l-.002-.01-.001-.005q-.004-.023-.003-.047V6.686a.2.2 0 0 1 .006-.062l.003-.017q0-.005.002-.012v-.004l.003-.009.004-.009.008-.026.01-.018.008-.018.003-.006.012-.017.007-.012.02-.027.008-.01.01-.01.014-.015.01-.01q.006-.003.01-.008l.004-.002.006-.004.009-.006.003-.003.003-.003L7.79 3.741a.37.37 0 0 1 .411 0l3.958 2.637.003.003.002.003.01.006.005.004.003.002.006.005.005.004.01.009.015.014q.009.008.018.021l.007.01.004.005a.1.1 0 0 1 .015.024l.012.017a.1.1 0 0 1 .012.024l.009.018.009.026.002.01.004.008q.004.013.005.033l.002.01.001.004a.3.3 0 0 1 .003.048V9.32zm-7.911-.698V7.378l.93.622zm3.211-3.884v1.735l-1.613 1.08-1.302-.87zm.743 0 2.915 1.945-1.302.87-1.613-1.08zm-.743 6.524L4.712 9.32l1.302-.873 1.613 1.08zm.743 0V9.527l1.613-1.08 1.302.873zM8 8.879 6.683 8 8 7.12 9.314 8zm3.584-1.5v1.243L10.652 8z"
                    clipRule="evenodd"
                />
            </svg>
        );
    }
);