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

export const IconPackColor24 = 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}
                <path
                    fill="#de156c"
                    d="M16.933 14.686 13.45 12.59a.617.617 0 0 0-.87.247.6.6 0 0 0-.08.33v4.193c0 .231.127.445.317.578l4.116 2.475c.19.116.444.116.634 0l4.116-2.475A.67.67 0 0 0 22 17.36v-4.192c0-.364-.285-.66-.633-.66a.7.7 0 0 0-.317.082l-3.483 2.096a.62.62 0 0 1-.634 0"
                />
                <path
                    fill="url(#pack-color-24__a)"
                    d="M17.25 15.264v4.192c0 .364.285.66.633.66.111 0 .222-.032.317-.082l3.483-2.096A.67.67 0 0 0 22 17.36v-4.192c0-.364-.285-.66-.633-.66a.7.7 0 0 0-.317.082l-3.483 2.096a.7.7 0 0 0-.317.578"
                />
                <path
                    fill="#47529d"
                    d="m15.8 3.59-3.483 2.096a.62.62 0 0 1-.634 0L8.2 3.59a.617.617 0 0 0-.87.247.6.6 0 0 0-.08.33V8.36c0 .23.127.446.317.578l4.116 2.475c.19.116.444.116.634 0l4.116-2.475a.67.67 0 0 0 .317-.578V4.168c0-.364-.285-.66-.633-.66a.7.7 0 0 0-.317.082"
                />
                <path
                    fill="url(#pack-color-24__b)"
                    d="m15.8 3.59-3.483 2.096a.67.67 0 0 0-.317.578v4.192c0 .363.285.66.633.66.111 0 .222-.033.317-.082l3.483-2.096a.67.67 0 0 0 .317-.578V4.168c0-.364-.285-.66-.633-.66a.7.7 0 0 0-.317.082"
                />
                <path
                    fill="#252960"
                    d="M6.433 14.686 2.95 12.59a.617.617 0 0 0-.87.247.6.6 0 0 0-.08.33v4.193c0 .231.127.445.317.578l4.116 2.475c.19.116.444.116.634 0l4.116-2.475a.67.67 0 0 0 .317-.578v-4.192c0-.364-.285-.66-.633-.66a.7.7 0 0 0-.317.082l-3.483 2.096a.62.62 0 0 1-.634 0"
                />
                <path
                    fill="url(#pack-color-24__c)"
                    d="M6.75 15.264v4.192c0 .364.285.66.633.66.111 0 .222-.032.317-.082l3.483-2.096a.67.67 0 0 0 .317-.578v-4.192c0-.364-.285-.66-.633-.66a.7.7 0 0 0-.317.082l-3.483 2.096a.7.7 0 0 0-.317.578"
                />
                <defs>
                    <linearGradient
                        id="pack-color-24__a"
                        x1={19.631}
                        x2={19.631}
                        y1={12.504}
                        y2={20.119}
                        gradientUnits="userSpaceOnUse"
                    >
                        <stop stopColor="#fc72c7" />
                        <stop offset={1} stopColor="#de156c" />
                    </linearGradient>
                    <linearGradient
                        id="pack-color-24__b"
                        x1={14.381}
                        x2={14.381}
                        y1={3.504}
                        y2={11.119}
                        gradientUnits="userSpaceOnUse"
                    >
                        <stop stopColor="#8896db" />
                        <stop offset={1} stopColor="#47529d" />
                    </linearGradient>
                    <linearGradient
                        id="pack-color-24__c"
                        x1={9.131}
                        x2={9.131}
                        y1={12.504}
                        y2={20.119}
                        gradientUnits="userSpaceOnUse"
                    >
                        <stop stopColor="#757cba" />
                        <stop offset={1} stopColor="#252960" />
                    </linearGradient>
                </defs>
            </svg>
        );
    }
);