import React from "react";

import { guid } from "eez-studio-shared/guid";

////////////////////////////////////////////////////////////////////////////////

export const ALIGN_HORIZONTAL_LEFT_ICON = () => {
    const id = guid();
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 23.0256 23.9999"
        >
            <defs>
                <linearGradient
                    gradientTransform="matrix(3.33312 0 0 1.67182 -155.1792 -171.7462)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-d`}
                    x1="18.8469"
                    x2="17.7524"
                    href={`#${id}-a`}
                    y1="218.9795"
                    y2="215.2099"
                />
                <linearGradient
                    gradientTransform="matrix(2.75057 0 0 1.00265 -133.3919 -18.4993)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-c`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-b`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient
                    gradientTransform="matrix(1.1573 0 0 .59969 -54.4347 64.9282)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-k`}
                    x1="15.7416"
                    x2="17.947"
                    href={`#${id}-a`}
                    y1="213.872"
                    y2="219.6793"
                />
                <linearGradient
                    gradientTransform="matrix(1.53768 0 0 1.00088 -61.4516 -22.139)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-j`}
                    x1="20.2169"
                    x2="18.8231"
                    href={`#${id}-a`}
                    y1="219.9305"
                    y2="214.6554"
                />
                <linearGradient
                    gradientTransform="matrix(1.52515 0 0 .9332 -44.8839 -23.1282)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-h`}
                    x1="15.7416"
                    x2="19.3825"
                    href={`#${id}-a`}
                    y1="213.872"
                    y2="219.4184"
                />
                <linearGradient id={`${id}-a`}>
                    <stop offset="0" stopColor="#fff" />
                    <stop offset="1" stopColor="#98b6d3" />
                </linearGradient>
                <linearGradient id={`${id}-b`}>
                    <stop offset="0" stopColor="#5a5a5a" />
                    <stop offset="1" />
                </linearGradient>
                <linearGradient
                    gradientTransform="matrix(2.02644 0 0 1.55751 -54.1312 -158.6166)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-g`}
                    x1="18.5086"
                    x2="17.1502"
                    href={`#${id}-a`}
                    y1="218.8883"
                    y2="214.5512"
                />
                <linearGradient
                    gradientTransform="matrix(2.11432 0 0 1.00265 -47.3376 -30.1841)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-f`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-b`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient
                    gradientTransform="matrix(2.50859 0 0 1.0017 -139.9689 -26.3136)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-e`}
                    x1="16.0473"
                    x2="17.3105"
                    href={`#${id}-a`}
                    y1="213.2164"
                    y2="217.8234"
                />
                <linearGradient
                    gradientTransform="matrix(1.37376 0 0 .71597 -52.9257 45.4213)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-i`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-b`}
                    y1="203.3658"
                    y2="209.2774"
                />
            </defs>
            <g
                color="#000"
                strokeWidth="1.001"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-c)`}
                    d="M-104.4881 187.554h22.0009v7.0176h-22.0009z"
                    transform="matrix(1 0 0 .998 105.0122 -185.6846)"
                />
                <path
                    fill={`url(#${id}-d)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-e)`}
                    strokeLinecap="round"
                    d="M-103.4882 188.5476h20.0011v5.0218h-20.0011z"
                    transform="matrix(1 0 0 .998 105.0122 -185.6846)"
                />
            </g>
            <g
                color="#000"
                strokeWidth="1.68"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-f)`}
                    d="M-25.1196 175.8691h16.9118v7.0176h-16.9118z"
                    transform="matrix(.41407 0 0 .85571 10.9258 -145.9943)"
                />
                <path
                    fill={`url(#${id}-g)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-h)`}
                    strokeLinecap="round"
                    d="M-22.7045 177.0416h12.1601v4.6784h-12.1601z"
                    transform="matrix(.41407 0 0 .85571 10.9258 -145.9943)"
                />
            </g>
            <g
                color="#000"
                strokeWidth=".9579"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-i)`}
                    d="M-38.4899 192.5597h10.9883v5.0111h-10.9883z"
                    transform="matrix(1.09192 0 0 .998 42.554 -179.6767)"
                />
                <path
                    fill={`url(#${id}-j)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-k)`}
                    strokeLinecap="round"
                    d="M-37.6049 193.5608h9.2272v3.0064h-9.2272z"
                    transform="matrix(1.09192 0 0 .998 42.554 -179.6767)"
                />
            </g>
            <path color="#000" fill="none" d="M0 0h16v15.9681H0z" />
            <path
                d="M1 21.5 4 19v2.0001h11v.9998H4v2L1 21.5Z"
                fillRule="evenodd"
            />
            <path
                d="M-27.4588 175.5271v23.0451"
                transform="matrix(1 0 0 .998 27.9834 -174.6772)"
                fill="none"
                stroke="#c80000"
                strokeWidth="1.001"
                strokeLinecap="square"
            />
        </svg>
    );
};

export const ALIGN_HORIZONTAL_CENTER_ICON = () => {
    const id = guid();
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 24 24"
        >
            <defs>
                <linearGradient
                    gradientTransform="matrix(1.34666 0 0 .71597 -52.6543 45.4213)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-i`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-a`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient id={`${id}-a`}>
                    <stop offset="0" stopColor="#5a5a5a" />
                    <stop offset="1" />
                </linearGradient>
                <linearGradient
                    gradientTransform="matrix(1.0185 0 0 .59969 -52.0082 64.9282)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-k`}
                    x1="15.7416"
                    x2="17.947"
                    href={`#${id}-b`}
                    y1="213.872"
                    y2="219.6793"
                />
                <linearGradient
                    gradientTransform="matrix(1.37376 0 0 .71597 -52.9257 45.4213)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-c`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-a`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient
                    gradientTransform="matrix(2.50859 0 0 1.0017 -139.9689 -26.3136)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-h`}
                    x1="16.0473"
                    x2="17.3105"
                    href={`#${id}-b`}
                    y1="213.2164"
                    y2="217.8234"
                />
                <linearGradient
                    gradientTransform="matrix(3.33312 0 0 1.67182 -155.1792 -171.7462)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-g`}
                    x1="18.8469"
                    x2="17.7524"
                    href={`#${id}-b`}
                    y1="218.9795"
                    y2="215.2099"
                />
                <linearGradient
                    gradientTransform="matrix(2.75057 0 0 1.00265 -133.3919 -18.4993)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-f`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-a`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient
                    gradientTransform="matrix(1.53768 0 0 1.00088 -61.4516 -22.139)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-d`}
                    x1="20.2169"
                    x2="18.8231"
                    href={`#${id}-b`}
                    y1="219.9305"
                    y2="214.6554"
                />
                <linearGradient
                    gradientTransform="matrix(1.1573 0 0 .59969 -54.4347 64.9282)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-e`}
                    x1="15.7416"
                    x2="17.947"
                    href={`#${id}-b`}
                    y1="213.872"
                    y2="219.6793"
                />
                <linearGradient
                    gradientTransform="matrix(1.35325 0 0 1.00088 -58.1835 -22.139)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-j`}
                    x1="20.2169"
                    x2="18.8231"
                    href={`#${id}-b`}
                    y1="219.9305"
                    y2="214.6554"
                />
                <linearGradient id={`${id}-b`}>
                    <stop offset="0" stopColor="#fff" />
                    <stop offset="1" stopColor="#98b6d3" />
                </linearGradient>
            </defs>
            <g
                color="#000"
                strokeWidth=".9579"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-c)`}
                    d="M-38.4899 192.5597h10.9883v5.0111h-10.9883z"
                    transform="matrix(1.09192 0 0 .998 47.5374 -179.6777)"
                />
                <path
                    fill={`url(#${id}-d)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-e)`}
                    strokeLinecap="round"
                    d="M-37.6049 193.5608h9.2272v3.0064h-9.2272z"
                    transform="matrix(1.09192 0 0 .998 47.5374 -179.6777)"
                />
            </g>
            <g
                color="#000"
                strokeWidth="1.001"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-f)`}
                    d="M-104.4881 187.554h22.0009v7.0176h-22.0009z"
                    transform="matrix(1 0 0 .998 104.996 -185.6808)"
                />
                <path
                    fill={`url(#${id}-g)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-h)`}
                    strokeLinecap="round"
                    d="M-103.4882 188.5476h20.0011v5.0218h-20.0011z"
                    transform="matrix(1 0 0 .998 104.996 -185.6808)"
                />
            </g>
            <path color="#000" fill="none" d="M0 0h24v24H0z" />
            <path color="#000" fill="none" d="M0 0h16v15.9681H0z" />
            <path color="#000" fill="none" d="M.031 0h16v15.9681h-16z" />
            <path
                d="m11 21.4681-3 2.5v-2L2 22v-1l6-.0319v-2l3 2.5Z"
                fillRule="evenodd"
            />
            <g
                color="#000"
                strokeWidth="1.1608"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-i)`}
                    d="M-38.5032 192.5597h10.7715v5.0111h-10.7715z"
                    transform="matrix(.74362 0 0 .998 36.1296 -186.6777)"
                />
                <path
                    fill={`url(#${id}-j)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-k)`}
                    strokeLinecap="round"
                    d="M-37.1969 193.5608h8.1205v3.0064h-8.1205z"
                    transform="matrix(.74362 0 0 .998 36.1296 -186.6777)"
                />
            </g>
            <path
                d="M-27.4588 175.5271v23.0451"
                transform="matrix(1 0 0 .998 38.9667 -174.677)"
                fill="none"
                stroke="#c80000"
                strokeWidth="1.001"
                strokeLinecap="square"
            />
            <path
                d="m12.0079 21.4992 3 2.5v-2l6 .0318v-.9999l-6-.032v-2l-3 2.5Z"
                fillRule="evenodd"
            />
        </svg>
    );
};

export const ALIGN_HORIZONTAL_RIGHT_ICON = () => {
    const id = guid();
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 24.0476 23.999"
        >
            <defs>
                <linearGradient
                    gradientTransform="matrix(1.1573 0 0 .59969 -54.4347 64.9282)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-e`}
                    x1="15.7416"
                    x2="17.947"
                    href={`#${id}-a`}
                    y1="213.872"
                    y2="219.6793"
                />
                <linearGradient
                    gradientTransform="matrix(1.52515 0 0 .9332 -44.8839 -23.1282)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-k`}
                    x1="15.7416"
                    x2="19.3825"
                    href={`#${id}-a`}
                    y1="213.872"
                    y2="219.4184"
                />
                <linearGradient
                    gradientTransform="matrix(1.53768 0 0 1.00088 -61.4516 -22.139)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-d`}
                    x1="20.2169"
                    x2="18.8231"
                    href={`#${id}-a`}
                    y1="219.9305"
                    y2="214.6554"
                />
                <linearGradient id={`${id}-a`}>
                    <stop offset="0" stopColor="#fff" />
                    <stop offset="1" stopColor="#98b6d3" />
                </linearGradient>
                <linearGradient
                    gradientTransform="matrix(3.33312 0 0 1.67182 -155.1792 -171.7462)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-g`}
                    x1="18.8469"
                    x2="17.7524"
                    href={`#${id}-a`}
                    y1="218.9795"
                    y2="215.2099"
                />
                <linearGradient
                    gradientTransform="matrix(2.75057 0 0 1.00265 -133.3919 -18.4993)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-f`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-b`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient
                    gradientTransform="matrix(2.02644 0 0 1.55751 -54.1312 -158.6166)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-j`}
                    x1="18.5086"
                    x2="17.1502"
                    href={`#${id}-a`}
                    y1="218.8883"
                    y2="214.5512"
                />
                <linearGradient
                    gradientTransform="matrix(2.11432 0 0 1.00265 -47.3376 -30.1841)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-i`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-b`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient
                    gradientTransform="matrix(2.50859 0 0 1.0017 -139.9689 -26.3136)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-h`}
                    x1="16.0473"
                    x2="17.3105"
                    href={`#${id}-a`}
                    y1="213.2164"
                    y2="217.8234"
                />
                <linearGradient
                    gradientTransform="matrix(1.37376 0 0 .71597 -52.9257 45.4213)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-c`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-b`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient id={`${id}-b`}>
                    <stop offset="0" stopColor="#5a5a5a" />
                    <stop offset="1" />
                </linearGradient>
            </defs>
            <path color="#000" fill="none" d="M0 0h16v15.968H0z" />
            <g
                color="#000"
                strokeWidth=".9579"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-c)`}
                    d="M-38.4899 192.5597h10.9883v5.0111h-10.9883z"
                    transform="matrix(1.09192 0 0 .998 53.554 -179.6767)"
                />
                <path
                    fill={`url(#${id}-d)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-e)`}
                    strokeLinecap="round"
                    d="M-37.6049 193.5608h9.2272v3.0064h-9.2272z"
                    transform="matrix(1.09192 0 0 .998 53.554 -179.6767)"
                />
            </g>
            <g
                color="#000"
                strokeWidth="1.001"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-f)`}
                    d="M-104.4881 187.554h22.0009v7.0176h-22.0009z"
                    transform="matrix(1 0 0 .998 106.0096 -185.6896)"
                />
                <path
                    fill={`url(#${id}-g)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-h)`}
                    strokeLinecap="round"
                    d="M-103.4882 188.5476h20.0011v5.0218h-20.0011z"
                    transform="matrix(1 0 0 .998 106.0096 -185.6896)"
                />
            </g>
            <g
                color="#000"
                strokeWidth="1.68"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-i)`}
                    d="M-25.1196 175.8691h16.9118v7.0176h-16.9118z"
                    transform="matrix(.41407 0 0 .85571 26.9258 -145.9943)"
                />
                <path
                    fill={`url(#${id}-j)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-k)`}
                    strokeLinecap="round"
                    d="M-22.7045 177.0416h12.1601v4.6784h-12.1601z"
                    transform="matrix(.41407 0 0 .85571 26.9258 -145.9943)"
                />
            </g>
            <path
                d="M-27.4588 175.5271v23.0451"
                transform="matrix(1 0 0 .998 50.9834 -174.6772)"
                fill="none"
                stroke="#c80000"
                strokeWidth="1.001"
                strokeLinecap="square"
            />
            <path
                d="m23.0246 21.4991-3-2.5v2h-11v.9999h11v2l3-2.4999Z"
                fillRule="evenodd"
            />
        </svg>
    );
};

export const ALIGN_VERTICAL_TOP_ICON = () => {
    const id = guid();
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 23.9982 23.0226"
        >
            <defs>
                <linearGradient
                    gradientTransform="matrix(1.52515 0 0 .9332 -44.8839 -23.1282)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-k`}
                    x1="15.7416"
                    x2="19.3825"
                    href={`#${id}-a`}
                    y1="213.872"
                    y2="219.4184"
                />
                <linearGradient
                    gradientTransform="matrix(1.53768 0 0 1.00088 -61.4516 -22.139)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-g`}
                    x1="20.2169"
                    x2="18.8231"
                    href={`#${id}-a`}
                    y1="219.9305"
                    y2="214.6554"
                />
                <linearGradient
                    gradientTransform="matrix(1.1573 0 0 .59969 -54.4347 64.9282)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-h`}
                    x1="15.7416"
                    x2="17.947"
                    href={`#${id}-a`}
                    y1="213.872"
                    y2="219.6793"
                />
                <linearGradient id={`${id}-a`}>
                    <stop offset="0" stopColor="#fff" />
                    <stop offset="1" stopColor="#98b6d3" />
                </linearGradient>
                <linearGradient
                    gradientTransform="matrix(3.33312 0 0 1.67182 -155.1792 -171.7462)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-d`}
                    x1="18.8469"
                    x2="17.7524"
                    href={`#${id}-a`}
                    y1="218.9795"
                    y2="215.2099"
                />
                <linearGradient
                    gradientTransform="matrix(2.75057 0 0 1.00265 -133.3919 -18.4993)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-c`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-b`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient
                    gradientTransform="matrix(2.02644 0 0 1.55751 -54.1312 -158.6166)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-j`}
                    x1="18.5086"
                    x2="17.1502"
                    href={`#${id}-a`}
                    y1="218.8883"
                    y2="214.5512"
                />
                <linearGradient
                    gradientTransform="matrix(2.11432 0 0 1.00265 -47.3376 -30.1841)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-i`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-b`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient
                    gradientTransform="matrix(1.37376 0 0 .71597 -52.9257 45.4213)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-f`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-b`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient
                    gradientTransform="matrix(2.50859 0 0 1.0017 -139.9689 -26.3136)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-e`}
                    x1="16.0473"
                    x2="17.3105"
                    href={`#${id}-a`}
                    y1="213.2164"
                    y2="217.8234"
                />
                <linearGradient id={`${id}-b`}>
                    <stop offset="0" stopColor="#5a5a5a" />
                    <stop offset="1" />
                </linearGradient>
            </defs>
            <path color="#000" fill="none" d="M23.9751.0221v16H8.0071v-16z" />
            <path
                d="m2.5 1.0212 2.5 3H3v11h-.9999v-11h-2l2.5-3Z"
                fillRule="evenodd"
            />
            <g
                color="#000"
                strokeWidth="1.001"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-c)`}
                    d="M-104.4881 187.554h22.0009v7.0176h-22.0009z"
                    transform="matrix(0 1 .998 0 -171.6839 105.0093)"
                />
                <path
                    fill={`url(#${id}-d)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-e)`}
                    strokeLinecap="round"
                    d="M-103.4882 188.5476h20.0011v5.0218h-20.0011z"
                    transform="matrix(0 1 .998 0 -171.6839 105.0093)"
                />
            </g>
            <g
                color="#000"
                strokeWidth=".9579"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-f)`}
                    d="M-38.4899 192.5597h10.9883v5.0111h-10.9883z"
                    transform="matrix(0 1.09192 .998 0 -185.6764 42.5507)"
                />
                <path
                    fill={`url(#${id}-g)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-h)`}
                    strokeLinecap="round"
                    d="M-37.6049 193.5608h9.2272v3.0064h-9.2272z"
                    transform="matrix(0 1.09192 .998 0 -185.6764 42.5507)"
                />
            </g>
            <g
                color="#000"
                strokeWidth="1.68"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-i)`}
                    d="M-25.1196 175.8691h16.9118v7.0176h-16.9118z"
                    transform="matrix(0 .41407 .85571 0 -136.9988 10.9224)"
                />
                <path
                    fill={`url(#${id}-j)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-k)`}
                    strokeLinecap="round"
                    d="M-22.7045 177.0416h12.1601v4.6784h-12.1601z"
                    transform="matrix(0 .41407 .85571 0 -136.9988 10.9224)"
                />
            </g>
            <path
                d="M-27.4588 175.5271v23.0451"
                transform="matrix(0 1 -.998 0 198.6757 27.98)"
                fill="none"
                stroke="#c80000"
                strokeWidth="1.001"
                strokeLinecap="square"
            />
        </svg>
    );
};

export const ALIGN_VERTICAL_CENTER_ICON = () => {
    const id = guid();
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 23.9987 23.0019"
        >
            <defs>
                <linearGradient
                    gradientTransform="matrix(1.0185 0 0 .59969 -52.0082 64.9282)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-h`}
                    x1="15.7416"
                    x2="17.947"
                    href={`#${id}-a`}
                    y1="213.872"
                    y2="219.6793"
                />
                <linearGradient
                    gradientTransform="matrix(2.50859 0 0 1.0017 -139.9689 -26.3136)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-e`}
                    x1="16.0473"
                    x2="17.3105"
                    href={`#${id}-a`}
                    y1="213.2164"
                    y2="217.8234"
                />
                <linearGradient
                    gradientTransform="matrix(1.37376 0 0 .71597 -52.9257 45.4213)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-i`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-b`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient id={`${id}-b`}>
                    <stop offset="0" stopColor="#5a5a5a" />
                    <stop offset="1" />
                </linearGradient>
                <linearGradient
                    gradientTransform="matrix(1.34666 0 0 .71597 -52.6543 45.4213)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-f`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-b`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient
                    gradientTransform="matrix(1.1573 0 0 .59969 -54.4347 64.9282)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-k`}
                    x1="15.7416"
                    x2="17.947"
                    href={`#${id}-a`}
                    y1="213.872"
                    y2="219.6793"
                />
                <linearGradient
                    gradientTransform="matrix(1.53768 0 0 1.00088 -61.4516 -22.139)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-j`}
                    x1="20.2169"
                    x2="18.8231"
                    href={`#${id}-a`}
                    y1="219.9305"
                    y2="214.6554"
                />
                <linearGradient id={`${id}-a`}>
                    <stop offset="0" stopColor="#fff" />
                    <stop offset="1" stopColor="#98b6d3" />
                </linearGradient>
                <linearGradient
                    gradientTransform="matrix(1.35325 0 0 1.00088 -58.1835 -22.139)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-g`}
                    x1="20.2169"
                    x2="18.8231"
                    href={`#${id}-a`}
                    y1="219.9305"
                    y2="214.6554"
                />
                <linearGradient
                    gradientTransform="matrix(3.33312 0 0 1.67182 -155.1792 -171.7462)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-d`}
                    x1="18.8469"
                    x2="17.7524"
                    href={`#${id}-a`}
                    y1="218.9795"
                    y2="215.2099"
                />
                <linearGradient
                    gradientTransform="matrix(2.75057 0 0 1.00265 -133.3919 -18.4993)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-c`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-b`}
                    y1="203.3658"
                    y2="209.2774"
                />
            </defs>
            <path color="#000" fill="none" d="M23.9755.0183v16H8.0074v-16z" />
            <path color="#000" fill="none" d="M23.9755.0492v16H8.0074v-16z" />
            <path
                d="m2.5 11.0006-2.5-3h2l-.0318-6h1l.0318 6h2l-2.5 3Zm0 1-2.5 3h2l-.0318 6h1l.0319-6h2l-2.5-3Z"
                fillRule="evenodd"
            />
            <g
                color="#000"
                strokeWidth="1.001"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-c)`}
                    d="M-104.4881 187.554h22.0009v7.0176h-22.0009z"
                    transform="matrix(0 1 .998 0 -171.6835 104.9886)"
                />
                <path
                    fill={`url(#${id}-d)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-e)`}
                    strokeLinecap="round"
                    d="M-103.4882 188.5476h20.0011v5.0218h-20.0011z"
                    transform="matrix(0 1 .998 0 -171.6835 104.9886)"
                />
            </g>
            <g
                color="#000"
                strokeWidth="1.1608"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-f)`}
                    d="M-38.5032 192.5597h10.7715v5.0111h-10.7715z"
                    transform="matrix(0 .74362 .998 0 -178.6756 36.1321)"
                />
                <path
                    fill={`url(#${id}-g)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-h)`}
                    strokeLinecap="round"
                    d="M-37.1969 193.5608h8.1205v3.0064h-8.1205z"
                    transform="matrix(0 .74362 .998 0 -178.6756 36.1321)"
                />
            </g>
            <g
                color="#000"
                strokeWidth=".9579"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-i)`}
                    d="M-38.4899 192.5597h10.9883v5.0111h-10.9883z"
                    transform="matrix(0 1.09192 .998 0 -185.6756 47.5283)"
                />
                <path
                    fill={`url(#${id}-j)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-k)`}
                    strokeLinecap="round"
                    d="M-37.6049 193.5608h9.2272v3.0064h-9.2272z"
                    transform="matrix(0 1.09192 .998 0 -185.6756 47.5283)"
                />
            </g>
            <path
                d="M-27.4588 175.5271v23.0451"
                transform="matrix(0 1 -.998 0 198.6763 38.9593)"
                fill="none"
                stroke="#c80000"
                strokeWidth="1.001"
                strokeLinecap="square"
            />
        </svg>
    );
};

export const ALIGN_VERTICAL_BOTTOM_ICON = () => {
    const id = guid();
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 24.0033 23.0227"
        >
            <defs>
                <linearGradient id={`${id}-b`}>
                    <stop offset="0" stopColor="#5a5a5a" />
                    <stop offset="1" />
                </linearGradient>
                <linearGradient
                    gradientTransform="matrix(2.02644 0 0 1.55751 -54.1312 -158.6166)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-j`}
                    x1="18.5086"
                    x2="17.1502"
                    href={`#${id}-a`}
                    y1="218.8883"
                    y2="214.5512"
                />
                <linearGradient
                    gradientTransform="matrix(2.11432 0 0 1.00265 -47.3376 -30.1841)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-i`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-b`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient
                    gradientTransform="matrix(1.37376 0 0 .71597 -52.9257 45.4213)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-c`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-b`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient
                    gradientTransform="matrix(2.50859 0 0 1.0017 -139.9689 -26.3136)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-h`}
                    x1="16.0473"
                    x2="17.3105"
                    href={`#${id}-a`}
                    y1="213.2164"
                    y2="217.8234"
                />
                <linearGradient
                    gradientTransform="matrix(3.33312 0 0 1.67182 -155.1792 -171.7462)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-g`}
                    x1="18.8469"
                    x2="17.7524"
                    href={`#${id}-a`}
                    y1="218.9795"
                    y2="215.2099"
                />
                <linearGradient
                    gradientTransform="matrix(2.75057 0 0 1.00265 -133.3919 -18.4993)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-f`}
                    x1="10.0417"
                    x2="14.0108"
                    href={`#${id}-b`}
                    y1="203.3658"
                    y2="209.2774"
                />
                <linearGradient
                    gradientTransform="matrix(1.52515 0 0 .9332 -44.8839 -23.1282)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-k`}
                    x1="15.7416"
                    x2="19.3825"
                    href={`#${id}-a`}
                    y1="213.872"
                    y2="219.4184"
                />
                <linearGradient
                    gradientTransform="matrix(1.53768 0 0 1.00088 -61.4516 -22.139)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-d`}
                    x1="20.2169"
                    x2="18.8231"
                    href={`#${id}-a`}
                    y1="219.9305"
                    y2="214.6554"
                />
                <linearGradient
                    gradientTransform="matrix(1.1573 0 0 .59969 -54.4347 64.9282)"
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-e`}
                    x1="15.7416"
                    x2="17.947"
                    href={`#${id}-a`}
                    y1="213.872"
                    y2="219.6793"
                />
                <linearGradient id={`${id}-a`}>
                    <stop offset="0" stopColor="#fff" />
                    <stop offset="1" stopColor="#98b6d3" />
                </linearGradient>
            </defs>
            <path
                d="m2.5 22.0015 2.5-3H3v-11h-.9999v11h-2l2.5 3Z"
                fillRule="evenodd"
            />
            <g
                color="#000"
                strokeWidth=".9579"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-c)`}
                    d="M-38.4899 192.5597h10.9883v5.0111h-10.9883z"
                    transform="matrix(0 1.09192 .998 0 -184.6774 52.5292)"
                />
                <path
                    fill={`url(#${id}-d)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-e)`}
                    strokeLinecap="round"
                    d="M-37.6049 193.5608h9.2272v3.0064h-9.2272z"
                    transform="matrix(0 1.09192 .998 0 -184.6774 52.5292)"
                />
            </g>
            <g
                color="#000"
                strokeWidth="1.001"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-f)`}
                    d="M-104.4881 187.554h22.0009v7.0176h-22.0009z"
                    transform="matrix(0 1 .998 0 -170.68 104.9886)"
                />
                <path
                    fill={`url(#${id}-g)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-h)`}
                    strokeLinecap="round"
                    d="M-103.4882 188.5476h20.0011v5.0218h-20.0011z"
                    transform="matrix(0 1 .998 0 -170.68 104.9886)"
                />
            </g>
            <g
                color="#000"
                strokeWidth="1.68"
                strokeLinejoin="round"
                strokeMiterlimit="0"
            >
                <path
                    fill="none"
                    stroke={`url(#${id}-i)`}
                    d="M-25.1196 175.8691h16.9118v7.0176h-16.9118z"
                    transform="matrix(0 .41407 .85571 0 -135.9938 25.9)"
                />
                <path
                    fill={`url(#${id}-j)`}
                    fillRule="evenodd"
                    stroke={`url(#${id}-k)`}
                    strokeLinecap="round"
                    d="M-22.7045 177.0416h12.1601v4.6784h-12.1601z"
                    transform="matrix(0 .41407 .85571 0 -135.9938 25.9)"
                />
            </g>
            <path
                d="M-27.4588 175.5271v23.0451"
                transform="matrix(0 1 -.998 0 198.6757 49.9602)"
                fill="none"
                stroke="#c80000"
                strokeWidth="1.001"
                strokeLinecap="square"
            />
        </svg>
    );
};

export const DISTRIBUTE_HORIZONTAL_LEFT_ICON = () => {
    const id = guid();
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            width={24}
            height={24}
        >
            <defs>
                <linearGradient id={`${id}-gradientVector`}>
                    <stop
                        offset={0}
                        style={{
                            stopColor: "#ffffff"
                        }}
                    />
                    <stop
                        offset={1}
                        style={{
                            stopColor: "#98b6d3"
                        }}
                    />
                </linearGradient>
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientFill1`}
                    x1={2}
                    x2={-2}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={1}
                    y2={-1}
                />
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientStroke1`}
                    x1={-3}
                    x2={3}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={-1}
                    y2={1}
                />
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientFill2`}
                    x1={2}
                    x2={-2}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={1}
                    y2={-1}
                />
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientStroke2`}
                    x1={-3}
                    x2={3}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={-1}
                    y2={1}
                />
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientFill3`}
                    x1={1}
                    x2={-1}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={1}
                    y2={-1}
                />
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientStroke3`}
                    x1={-2}
                    x2={2}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={-1}
                    y2={1}
                />
                <g id={`${id}-TheRect1`}>
                    <rect
                        x={-3}
                        y={-5}
                        width={6}
                        height={10}
                        style={{
                            fill: "none",
                            stroke: "#222222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <rect
                        x={-2}
                        y={-4}
                        width={4}
                        height={8}
                        style={{
                            fill: `url(#${id}-gradientFill1)`,
                            stroke: `url(#${id}-gradientStroke1)`
                        }}
                    />
                </g>
                <g id={`${id}-TheRect2`}>
                    <rect
                        x={-3}
                        y={-8}
                        width={6}
                        height={16}
                        style={{
                            fill: "none",
                            stroke: "#222222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <rect
                        x={-2}
                        y={-7}
                        width={4}
                        height={14}
                        style={{
                            fill: `url(#${id}-gradientFill2)`,
                            stroke: `url(#${id}-gradientStroke2)`
                        }}
                    />
                </g>
                <g id={`${id}-TheRect3`}>
                    <rect
                        x={-2}
                        y={-6}
                        width={4}
                        height={12}
                        style={{
                            fill: "none",
                            stroke: "#222222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <rect
                        x={-1}
                        y={-5}
                        width={2}
                        height={10}
                        style={{
                            fill: `url(#${id}-gradientFill3)`,
                            stroke: `url(#${id}-gradientStroke3)`
                        }}
                    />
                </g>
            </defs>
            <g id={`${id}-distribute-horizontal-left`}>
                <use
                    xlinkHref={`#${id}-TheRect1`}
                    transform="translate(3.5,12.5)"
                />
                <use
                    xlinkHref={`#${id}-TheRect2`}
                    transform="translate(12.5,14.5)"
                />
                <use
                    xlinkHref={`#${id}-TheRect3`}
                    transform="translate(20.5,15.5)"
                />
                <g
                    style={{
                        fill: "none",
                        stroke: "#c80000"
                    }}
                >
                    <path d="m  0.5,0 0,12" />
                    <path d="m  9.5,0 0,12" />
                    <path d="m 18.5,0 0,12" />
                </g>
                <path d="m  3,3 -2,-1.5 2,-1.5 v 1 l 4,0 v -1 l 2,1.5 -2,1.5 v -1 l -4,0 z" />
                <path d="m 12,3 -2,-1.5 2,-1.5 v 1 l 4,0 v -1 l 2,1.5 -2,1.5 v -1 l -4,0 z" />
            </g>
        </svg>
    );
};

export const DISTRIBUTE_HORIZONTAL_CENTER_ICON = () => {
    const id = guid();
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            width={24}
            height={24}
        >
            <defs>
                <linearGradient id={`${id}-gradientVector`}>
                    <stop
                        offset={0}
                        style={{
                            stopColor: "#ffffff"
                        }}
                    />
                    <stop
                        offset={1}
                        style={{
                            stopColor: "#98b6d3"
                        }}
                    />
                </linearGradient>
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientFill1`}
                    x1={2}
                    x2={-2}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={1}
                    y2={-1}
                />
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientStroke1`}
                    x1={-3}
                    x2={3}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={-1}
                    y2={1}
                />
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientFill2`}
                    x1={2}
                    x2={-2}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={1}
                    y2={-1}
                />
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientStroke2`}
                    x1={-3}
                    x2={3}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={-1}
                    y2={1}
                />
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientFill3`}
                    x1={1}
                    x2={-1}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={1}
                    y2={-1}
                />
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientStroke3`}
                    x1={-2}
                    x2={2}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={-1}
                    y2={1}
                />
                <g id={`${id}-TheRect1`}>
                    <rect
                        x={-3}
                        y={-5}
                        width={6}
                        height={10}
                        style={{
                            fill: "none",
                            stroke: "#222222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <rect
                        x={-2}
                        y={-4}
                        width={4}
                        height={8}
                        style={{
                            fill: `url(#${id}-gradientFill1)`,
                            stroke: `url(#${id}-gradientStroke1)`
                        }}
                    />
                </g>
                <g id={`${id}-TheRect2`}>
                    <rect
                        x={-3}
                        y={-8}
                        width={6}
                        height={16}
                        style={{
                            fill: "none",
                            stroke: "#222222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <rect
                        x={-2}
                        y={-7}
                        width={4}
                        height={14}
                        style={{
                            fill: `url(#${id}-gradientFill2)`,
                            stroke: `url(#${id}-gradientStroke2)`
                        }}
                    />
                </g>
                <g id={`${id}-TheRect3`}>
                    <rect
                        x={-2}
                        y={-6}
                        width={4}
                        height={12}
                        style={{
                            fill: "none",
                            stroke: "#222222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <rect
                        x={-1}
                        y={-5}
                        width={2}
                        height={10}
                        style={{
                            fill: `url(#${id}-gradientFill3)`,
                            stroke: `url(#${id}-gradientStroke3)`
                        }}
                    />
                </g>
            </defs>
            <g id={`${id}-distribute-horizontal-center`}>
                <use
                    xlinkHref={`#${id}-TheRect1`}
                    transform="translate(3.5,12.5)"
                />
                <use
                    xlinkHref={`#${id}-TheRect2`}
                    transform="translate(12.5,14.5)"
                />
                <use
                    xlinkHref={`#${id}-TheRect3`}
                    transform="translate(21.5,15.5)"
                />
                <g
                    style={{
                        fill: "none",
                        stroke: "#c80000"
                    }}
                >
                    <path d="m  3.5,0 0,12" />
                    <path d="m 12.5,0 0,12" />
                    <path d="m 21.5,0 0,12" />
                </g>
                <path d="m  6,3 -2,-1.5 2,-1.5 v 1 l 4,0 v -1 l 2,1.5 -2,1.5 v -1 l -4,0 z" />
                <path d="m 15,3 -2,-1.5 2,-1.5 v 1 l 4,0 v -1 l 2,1.5 -2,1.5 v -1 l -4,0 z" />
            </g>
        </svg>
    );
};

export const DISTRIBUTE_HORIZONTAL_RIGHT_ICON = () => {
    const id = guid();
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            width={24}
            height={24}
        >
            <defs>
                <linearGradient id={`${id}-gradientVector`}>
                    <stop
                        offset={0}
                        style={{
                            stopColor: "#ffffff"
                        }}
                    />
                    <stop
                        offset={1}
                        style={{
                            stopColor: "#98b6d3"
                        }}
                    />
                </linearGradient>
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientFill1`}
                    x1={2}
                    x2={-2}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={1}
                    y2={-1}
                />
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientStroke1`}
                    x1={-3}
                    x2={3}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={-1}
                    y2={1}
                />
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientFill2`}
                    x1={2}
                    x2={-2}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={1}
                    y2={-1}
                />
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientStroke2`}
                    x1={-3}
                    x2={3}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={-1}
                    y2={1}
                />
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientFill3`}
                    x1={1}
                    x2={-1}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={1}
                    y2={-1}
                />
                <linearGradient
                    gradientUnits="userSpaceOnUse"
                    id={`${id}-gradientStroke3`}
                    x1={-2}
                    x2={2}
                    xlinkHref={`#${id}-gradientVector`}
                    y1={-1}
                    y2={1}
                />
                <g id={`${id}-TheRect1`}>
                    <rect
                        x={-3}
                        y={-5}
                        width={6}
                        height={10}
                        style={{
                            fill: "none",
                            stroke: "#222222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <rect
                        x={-2}
                        y={-4}
                        width={4}
                        height={8}
                        style={{
                            fill: `url(#${id}-gradientFill1)`,
                            stroke: `url(#${id}-gradientStroke1)`
                        }}
                    />
                </g>
                <g id={`${id}-TheRect2`}>
                    <rect
                        x={-3}
                        y={-8}
                        width={6}
                        height={16}
                        style={{
                            fill: "none",
                            stroke: "#222222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <rect
                        x={-2}
                        y={-7}
                        width={4}
                        height={14}
                        style={{
                            fill: `url(#${id}-gradientFill2)`,
                            stroke: `url(#${id}-gradientStroke2)`
                        }}
                    />
                </g>
                <g id={`${id}-TheRect3`}>
                    <rect
                        x={-2}
                        y={-6}
                        width={4}
                        height={12}
                        style={{
                            fill: "none",
                            stroke: "#222222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <rect
                        x={-1}
                        y={-5}
                        width={2}
                        height={10}
                        style={{
                            fill: `url(#${id}-gradientFill3)`,
                            stroke: `url(#${id}-gradientStroke3)`
                        }}
                    />
                </g>
            </defs>
            <g id={`${id}-distribute-horizontal-right`}>
                <use
                    xlinkHref={`#${id}-TheRect1`}
                    transform="translate(20.5,12.5)"
                />
                <use
                    xlinkHref={`#${id}-TheRect2`}
                    transform="translate(11.5,14.5)"
                />
                <use
                    xlinkHref={`#${id}-TheRect3`}
                    transform="translate( 3.5,15.5)"
                />
                <g
                    style={{
                        fill: "none",
                        stroke: "#c80000"
                    }}
                >
                    <path d="m  5.5,0 0,12" />
                    <path d="m 14.5,0 0,12" />
                    <path d="m 23.5,0 0,12" />
                </g>
                <path d="m  8,3 -2,-1.5 2,-1.5 v 1 l 4,0 v -1 l 2,1.5 -2,1.5 v -1 l -4,0 z" />
                <path d="m 17,3 -2,-1.5 2,-1.5 v 1 l 4,0 v -1 l 2,1.5 -2,1.5 v -1 l -4,0 z" />
            </g>
        </svg>
    );
};

export const DISTRIBUTE_HORIZONTAL_GAPS_ICON = () => {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path
                d="M.5 6.5h3v15h-3zm10 2h3v9h-3zm10-3h3v18h-3z"
                fill="#98b6d3"
                stroke="#222"
                strokeLinejoin="round"
            />
            <path
                d="M1.5 20V7.5H3m8.5 8.5V9.5H13M21.5 22V6.5H23"
                fill="none"
                stroke="#e2e8f0"
            />
            <path
                d="M3.5 0v12m7-12v12m3-12v12m7-12v12"
                fill="none"
                stroke="#c80000"
            />
            <path d="M6 3 4 1.5 6 0v1h2V0l2 1.5L8 3V2H6zm10 0-2-1.5L16 0v1h2V0l2 1.5L18 3V2h-2z" />
        </svg>
    );
};

export const DISTRIBUTE_VERTICAL_TOP_ICON = () => {
    const id = guid();
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
            <defs>
                <linearGradient id={`${id}-a`}>
                    <stop offset="0" style={{ stopColor: "#fff" }} />
                    <stop offset="1" style={{ stopColor: "#98b6d3" }} />
                </linearGradient>
                <linearGradient
                    xlinkHref={`#${id}-a`}
                    id={`${id}-b`}
                    x1="2"
                    x2="-2"
                    y1="1"
                    y2="-1"
                    gradientUnits="userSpaceOnUse"
                />
                <linearGradient
                    xlinkHref={`#${id}-a`}
                    id={`${id}-c`}
                    x1="2"
                    x2="-2"
                    y1="1"
                    y2="-1"
                    gradientUnits="userSpaceOnUse"
                />
                <linearGradient
                    xlinkHref={`#${id}-a`}
                    id={`${id}-d`}
                    x1="1"
                    x2="-1"
                    y1="1"
                    y2="-1"
                    gradientUnits="userSpaceOnUse"
                />
                <g id={`${id}-e`}>
                    <path
                        d="M-3-5h6V5h-6z"
                        style={{
                            fill: "none",
                            stroke: "#222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <path
                        d="M-2-4h4v8h-4z"
                        style={{
                            fill: `url(#${id}-b)`,
                            stroke: `url(#${id}-gradientStroke1)`
                        }}
                    />
                </g>
                <g id={`${id}-f`}>
                    <path
                        d="M-3-8h6V8h-6z"
                        style={{
                            fill: "none",
                            stroke: "#222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <path
                        d="M-2-7h4V7h-4z"
                        style={{
                            fill: `url(#${id}-c)`,
                            stroke: `url(#${id}-gradientStroke2)`
                        }}
                    />
                </g>
                <g id={`${id}-g`}>
                    <path
                        d="M-2-6h4V6h-4z"
                        style={{
                            fill: "none",
                            stroke: "#222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <path
                        d="M-1-5h2V5h-2z"
                        style={{
                            fill: `url(#${id}-d)`,
                            stroke: `url(#${id}-gradientStroke3)`
                        }}
                    />
                </g>
            </defs>
            <g transform="matrix(0 1 1 0 0 0)">
                <use xlinkHref={`#${id}-e`} transform="translate(3.5 12.5)" />
                <use xlinkHref={`#${id}-f`} transform="translate(12.5 14.5)" />
                <use xlinkHref={`#${id}-g`} transform="translate(20.5 15.5)" />
                <g style={{ fill: "none", stroke: "#c80000" }}>
                    <path d="M.5 0v12M9.5 0v12M18.5 0v12" />
                </g>
                <path d="M3 3 1 1.5 3 0v1h4V0l2 1.5L7 3V2H3zM12 3l-2-1.5L12 0v1h4V0l2 1.5L16 3V2h-4z" />
            </g>
        </svg>
    );
};

export const DISTRIBUTE_VERTICAL_CENTER_ICON = () => {
    const id = guid();
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
            <defs>
                <linearGradient id={`${id}-a`}>
                    <stop offset="0" style={{ stopColor: "#fff" }} />
                    <stop offset="1" style={{ stopColor: "#98b6d3" }} />
                </linearGradient>
                <linearGradient
                    xlinkHref={`#${id}-a`}
                    id={`${id}-b`}
                    x1="2"
                    x2="-2"
                    y1="1"
                    y2="-1"
                    gradientUnits="userSpaceOnUse"
                />
                <linearGradient
                    xlinkHref={`#${id}-a`}
                    id={`${id}-c`}
                    x1="2"
                    x2="-2"
                    y1="1"
                    y2="-1"
                    gradientUnits="userSpaceOnUse"
                />
                <linearGradient
                    xlinkHref={`#${id}-a`}
                    id={`${id}-d`}
                    x1="1"
                    x2="-1"
                    y1="1"
                    y2="-1"
                    gradientUnits="userSpaceOnUse"
                />
                <g id={`${id}-e`}>
                    <path
                        d="M-3-5h6V5h-6z"
                        style={{
                            fill: "none",
                            stroke: "#222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <path
                        d="M-2-4h4v8h-4z"
                        style={{
                            fill: `url(#${id}-b)`,
                            stroke: `url(#${id}-gradientStroke1)`
                        }}
                    />
                </g>
                <g id={`${id}-f`}>
                    <path
                        d="M-3-8h6V8h-6z"
                        style={{
                            fill: "none",
                            stroke: "#222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <path
                        d="M-2-7h4V7h-4z"
                        style={{
                            fill: `url(#${id}-c)`,
                            stroke: `url(#${id}-gradientStroke2)`
                        }}
                    />
                </g>
                <g id={`${id}-g`}>
                    <path
                        d="M-2-6h4V6h-4z"
                        style={{
                            fill: "none",
                            stroke: "#222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <path
                        d="M-1-5h2V5h-2z"
                        style={{
                            fill: `url(#${id}-d)`,
                            stroke: `url(#${id}-gradientStroke3)`
                        }}
                    />
                </g>
            </defs>
            <g transform="matrix(0 1 1 0 0 0)">
                <use xlinkHref={`#${id}-e`} transform="translate(3.5 12.5)" />
                <use xlinkHref={`#${id}-f`} transform="translate(12.5 14.5)" />
                <use xlinkHref={`#${id}-g`} transform="translate(21.5 15.5)" />
                <g style={{ fill: "none", stroke: "#c80000" }}>
                    <path d="M3.5 0v12M12.5 0v12M21.5 0v12" />
                </g>
                <path d="M6 3 4 1.5 6 0v1h4V0l2 1.5L10 3V2H6zM15 3l-2-1.5L15 0v1h4V0l2 1.5L19 3V2h-4z" />
            </g>
        </svg>
    );
};

export const DISTRIBUTE_VERTICAL_BOTTOM_ICON = () => {
    const id = guid();
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
            <defs>
                <linearGradient id={`${id}-a`}>
                    <stop offset="0" style={{ stopColor: "#fff" }} />
                    <stop offset="1" style={{ stopColor: "#98b6d3" }} />
                </linearGradient>
                <linearGradient
                    xlinkHref={`#${id}-a`}
                    id={`${id}-b`}
                    x1="2"
                    x2="-2"
                    y1="1"
                    y2="-1"
                    gradientUnits="userSpaceOnUse"
                />
                <linearGradient
                    xlinkHref={`#${id}-a`}
                    id={`${id}-c`}
                    x1="2"
                    x2="-2"
                    y1="1"
                    y2="-1"
                    gradientUnits="userSpaceOnUse"
                />
                <linearGradient
                    xlinkHref={`#${id}-a`}
                    id={`${id}-d`}
                    x1="1"
                    x2="-1"
                    y1="1"
                    y2="-1"
                    gradientUnits="userSpaceOnUse"
                />
                <g id={`${id}-e`}>
                    <path
                        d="M-3-5h6V5h-6z"
                        style={{
                            fill: "none",
                            stroke: "#222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <path
                        d="M-2-4h4v8h-4z"
                        style={{
                            fill: `url(#${id}-b)`,
                            stroke: `url(#${id}-gradientStroke1)`
                        }}
                    />
                </g>
                <g id={`${id}-f`}>
                    <path
                        d="M-3-8h6V8h-6z"
                        style={{
                            fill: "none",
                            stroke: "#222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <path
                        d="M-2-7h4V7h-4z"
                        style={{
                            fill: `url(#${id}-c)`,
                            stroke: `url(#${id}-gradientStroke2)`
                        }}
                    />
                </g>
                <g id={`${id}-g`}>
                    <path
                        d="M-2-6h4V6h-4z"
                        style={{
                            fill: "none",
                            stroke: "#222",
                            strokeLinejoin: "round"
                        }}
                    />
                    <path
                        d="M-1-5h2V5h-2z"
                        style={{
                            fill: `url(#${id}-d)`,
                            stroke: `url(#${id}-gradientStroke3)`
                        }}
                    />
                </g>
            </defs>
            <g transform="matrix(0 1 1 0 0 0)">
                <use xlinkHref={`#${id}-e`} transform="translate(20.5 12.5)" />
                <use xlinkHref={`#${id}-f`} transform="translate(11.5 14.5)" />
                <use xlinkHref={`#${id}-g`} transform="translate(3.5 15.5)" />
                <g style={{ fill: "none", stroke: "#c80000" }}>
                    <path d="M5.5 0v12M14.5 0v12M23.5 0v12" />
                </g>
                <path d="M8 3 6 1.5 8 0v1h4V0l2 1.5L12 3V2H8zM17 3l-2-1.5L17 0v1h4V0l2 1.5L21 3V2h-4z" />
            </g>
        </svg>
    );
};

export const DISTRIBUTE_VERTICAL_GAPS_ICON = () => {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path
                d="M6.5.5v3h15v-3zm2 10v3h9v-3zm-3 10v3h18v-3z"
                fill="#98b6d3"
                stroke="#222"
                strokeLinejoin="round"
            />
            <path
                d="M20 1.5H7.5V3m8.5 8.5H9.5V13M22 21.5H6.5V23"
                fill="none"
                stroke="#e2e8f0"
            />
            <path
                d="M0 3.5h12m-12 7h12m-12 3h12m-12 7h12"
                fill="none"
                stroke="#c80000"
            />
            <path d="M3 6 1.5 4 0 6h1v2H0l1.5 2L3 8H2V6zm0 10-1.5-2L0 16h1v2H0l1.5 2L3 18H2v-2z" />
        </svg>
    );
};

export const LeftArrow = () => (
    <div style={{ padding: "0 8px" }}>
        <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            strokeWidth="2"
            stroke="currentColor"
            fill="none"
            strokeLinecap="round"
            strokeLinejoin="round"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <line x1="5" y1="12" x2="19" y2="12"></line>
            <line x1="5" y1="12" x2="9" y2="16"></line>
            <line x1="5" y1="12" x2="9" y2="8"></line>
        </svg>
    </div>
);

export const RightArrow = () => (
    <div style={{ marginTop: -2, padding: "0 8px" }}>
        <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            strokeWidth="2"
            stroke="currentColor"
            fill="none"
            strokeLinecap="round"
            strokeLinejoin="round"
        >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <line x1="5" y1="12" x2="19" y2="12"></line>
            <line x1="15" y1="16" x2="19" y2="12"></line>
            <line x1="15" y1="8" x2="19" y2="12"></line>
        </svg>
    </div>
);

export const PLOTLY_ICON = (
    <svg viewBox="0 0 24 24">
        <path d="M2.021 0C.967 0 .111.883.111 1.973v20.054c0 1.09.857 1.973 1.91 1.973H21.98c1.054 0 1.91-.884 1.91-1.973V1.973C23.89.883 23.034 0 21.98 0H2.02zM10.1 4.648a.7.7 0 0 1 .304.127 1.2 1.2 0 0 1 .356.373.21.21 0 0 1 .084.163c.165.388.135.857-.149 1.203-.19.232-.429.305-.648.263a.24.24 0 0 1-.096.04c-.41.13-.884-.218-.994-.663-.065-.26-.087-.674.076-.908a.4.4 0 0 1 .082-.086 1 1 0 0 1 .05-.264c.077-.214.256-.214.425-.148a1 1 0 0 1 .09-.006 2 2 0 0 1 .158.008.28.28 0 0 1 .262-.102m8.43 0c.098.012.204.06.304.127a1.2 1.2 0 0 1 .355.373.21.21 0 0 1 .084.163c.166.388.136.857-.148 1.203-.19.232-.43.305-.648.263a.24.24 0 0 1-.096.04c-.41.13-.885-.218-.994-.663-.065-.26-.087-.674.076-.908a.4.4 0 0 1 .082-.086 1 1 0 0 1 .049-.264c.077-.214.256-.214.424-.148a1 1 0 0 1 .091-.006 2 2 0 0 1 .159.008.28.28 0 0 1 .261-.102zm-13.159.16c.224-.013.461.063.649.198a1 1 0 0 1 .23.223l.059.039c.341.244.312.679.074.992l-.004.008a.91.91 0 0 1-.897.558c-.302-.008-.611-.084-.82-.271-.2-.143-.34-.356-.332-.627a.13.13 0 0 1 .092-.127 1.04 1.04 0 0 1 .342-.6.7.7 0 0 1 .607-.393m8.682.003c.224-.014.461.06.648.195a1 1 0 0 1 .229.224l.058.04c.342.244.315.679.076.992l-.005.006a.91.91 0 0 1-.895.558c-.302-.008-.614-.084-.822-.271a.73.73 0 0 1-.33-.627.13.13 0 0 1 .092-.125 1.04 1.04 0 0 1 .34-.6.7.7 0 0 1 .61-.393zm-8.282.496.034.04.011.005a.13.13 0 0 1 .088.076.6.6 0 0 1 .225.125.7.7 0 0 0-.078-.135 1.2 1.2 0 0 0-.28-.111m8.68 0 .033.04.012.005c.039.007.07.038.088.076a.6.6 0 0 1 .225.125.7.7 0 0 0-.079-.135 1.2 1.2 0 0 0-.279-.111m-4.553.119a2 2 0 0 0-.005.295c.075-.042.081-.17.064-.262a.3.3 0 0 0-.059-.033m8.428 0a2 2 0 0 0-.004.295c.076-.042.08-.17.063-.262l-.02-.014-.039-.02zM5.55 5.65l-.086.028.01.04c.057-.032.133-.028.175.028l-.003-.057a.3.3 0 0 1-.075-.023Q5.56 5.66 5.55 5.65m8.68 0-.086.028.011.04c.057-.032.134-.028.176.028l-.004-.057a.3.3 0 0 1-.074-.023zm-9.032.088.01.053.023.078q-.04-.044-.033-.13zm8.68.002a1 1 0 0 0 .033.13q-.04-.043-.033-.13m-3.18.02-.011.017a.38.38 0 0 1-.13.237l-.001.006a.12.12 0 0 1-.04.119l-.029.064a2 2 0 0 1-.148.285.6.6 0 0 0 .217-.205c.1-.156.147-.34.142-.523m8.43 0-.012.017a.38.38 0 0 1-.129.237l-.002.006c.013.043-.005.088-.039.119l-.029.064a2 2 0 0 1-.148.285.57.57 0 0 0 .216-.205c.1-.156.148-.34.143-.523m-9.961.039a1 1 0 0 0 .004.133c.017.185.078.383.219.513a1 1 0 0 0 .086.067 1 1 0 0 1-.143-.278 2.6 2.6 0 0 1-.166-.435m8.43 0a1 1 0 0 0 .004.133c.017.185.078.383.218.513a1 1 0 0 0 .086.067 1 1 0 0 1-.142-.278 2.5 2.5 0 0 1-.166-.435m-11.67.146a.4.4 0 0 1-.028.065l.036.068a.24.24 0 0 0-.008-.133m8.681 0-.029.065.035.068a.24.24 0 0 0-.006-.133m-9.09.41a.6.6 0 0 1-.18.038l-.013.015a.5.5 0 0 0 .229-.013zm8.68 0a.6.6 0 0 1-.18.038l-.013.015a.5.5 0 0 0 .228-.013zm-4.308 2.3a1.06 1.06 0 0 1 1.052 1.072v8.58c0 .592-.47 1.072-1.052 1.072s-1.055-.48-1.055-1.072v-8.58c0-.592.472-1.072 1.055-1.073zm8.431 0a1.06 1.06 0 0 1 1.053 1.072v8.58c0 .592-.47 1.072-1.053 1.072-.582 0-1.054-.48-1.054-1.072v-8.58c0-.592.472-1.072 1.054-1.073zm-12.95.105c.224-.013.461.06.649.195a1 1 0 0 1 .23.225l.059.039c.341.244.312.679.074.992l-.004.006a.91.91 0 0 1-.897.558c-.302-.007-.611-.083-.82-.271-.2-.142-.34-.354-.332-.625a.13.13 0 0 1 .092-.127 1.04 1.04 0 0 1 .342-.6.7.7 0 0 1 .607-.393zm8.682 0c.224-.013.461.06.648.195a1 1 0 0 1 .229.225l.058.039c.342.244.315.679.076.992l-.005.006a.91.91 0 0 1-.895.558c-.302-.007-.614-.083-.822-.271a.73.73 0 0 1-.33-.625.13.13 0 0 1 .092-.127 1.04 1.04 0 0 1 .34-.6.7.7 0 0 1 .61-.393zm-8.282.496.034.043.011.002a.13.13 0 0 1 .088.076.6.6 0 0 1 .225.125.7.7 0 0 0-.078-.133 1.2 1.2 0 0 0-.28-.113m8.68 0 .033.043.012.002c.039.007.07.038.088.076a.6.6 0 0 1 .225.125.7.7 0 0 0-.079-.133 1.2 1.2 0 0 0-.279-.113M5.55 9.6l-.086.027.01.041c.057-.032.133-.029.175.027l-.003-.054a.3.3 0 0 1-.075-.026zm8.68 0-.086.027.011.041c.057-.032.134-.029.176.027l-.004-.054a.3.3 0 0 1-.074-.026zm-9.032.09a.6.6 0 0 0 .032.123.16.16 0 0 1-.032-.124zm8.68 0a.6.6 0 0 0 .031.123.17.17 0 0 1-.031-.124zm-7.951.206a.4.4 0 0 1-.028.063l.036.07a.24.24 0 0 0-.008-.133m8.681 0a.4.4 0 0 1-.029.063l.035.07a.24.24 0 0 0-.006-.133m-9.09.409a.6.6 0 0 1-.18.037v.002l-.013.015a.55.55 0 0 0 .229-.015zm8.68 0a.6.6 0 0 1-.18.037v.002l-.013.015a.55.55 0 0 0 .228-.015zm-8.525 2.64c.582 0 1.053.48 1.053 1.073v4.289c0 .592-.47 1.072-1.053 1.072-.582 0-1.055-.48-1.055-1.072v-4.29c0-.592.473-1.072 1.055-1.072m8.432 0c.581 0 1.054.48 1.054 1.073v4.289c0 .592-.473 1.072-1.054 1.072-.583 0-1.053-.48-1.053-1.072v-4.29c0-.592.47-1.072 1.053-1.072" />
    </svg>
);

export const LINE_CHART_ICON = (
    <svg viewBox="0 0 1024.0009765625 1024" fill="currentColor">
        <path d="M128 896h896v128H0V0h128zm160-64c-53.02 0-96-42.98-96-96s42.98-96 96-96c2.828 0 5.622.148 8.388.386L399.58 468.4c-9.84-15.07-15.58-33.062-15.58-52.402 0-53.02 42.98-96 96-96s96 42.98 96 96c0 19.342-5.74 37.332-15.58 52.402l103.192 171.986A97.727 97.727 0 0 1 672 640c2.136 0 4.248.094 6.35.23l170.357-298.122c-10.536-15.408-16.706-34.036-16.706-54.11 0-53.02 42.98-96 96-96s96 42.98 96 96-42.98 96-96 96c-2.14 0-4.248-.094-6.35-.232L751.294 681.89C761.83 697.296 768 715.926 768 736c0 53.02-42.98 96-96 96s-96-42.98-96-96c0-19.34 5.74-37.332 15.578-52.402l-103.19-171.984c-2.766.238-5.56.386-8.388.386s-5.622-.146-8.388-.386L368.42 683.6C378.26 698.668 384 716.66 384 736c0 53.02-42.98 96-96 96z" />
    </svg>
);

export const GAUGE_ICON = (
    <svg viewBox="0 0 28 28" fill="currentColor">
        <g>
            <path d="M15.391 19.341 14 11l-1.39 8.341C11.653 19.842 11 20.845 11 22c0 1.657 1.343 3 3 3s3-1.343 3-3c0-1.155-.652-2.158-1.609-2.659z" />
            <path d="M14 3C6.268 3 0 9.268 0 17c0 2.059.444 4.014 1.242 5.773.544-.312 1.147-.605 1.8-.875C2.372 20.402 2 18.745 2 17 2 10.373 7.373 5 14 5s12 5.373 12 12c0 1.745-.372 3.402-1.042 4.898.653.27 1.256.562 1.8.875C27.557 21.014 28 19.059 28 17c0-7.732-6.268-14-14-14z" />
            <path d="m3.828 21.377-.617-1.901 3.805-1.235.617 1.902-3.805 1.234zm5.235-9.448-2.35-3.236 1.62-1.176 2.35 3.237-1.62 1.175zM13 6h2v4h-2V6zm-5.985 9.801-3.804-1.236.619-1.902 3.804 1.236-.619 1.902zm13.968-.001-.617-1.902 3.806-1.235.617 1.901-3.806 1.236zm-3.667-5.047 2.352-3.235 1.619 1.176-2.351 3.236-1.62-1.177zm6.856 10.624-3.805-1.235.617-1.901 3.805 1.235-.617 1.901z" />
        </g>
    </svg>
);

export const TABULATOR_ICON = (
    <svg viewBox="0 0 16 16">
        <path
            fill="currentcolor"
            d="M0 1v15h16V1zm5 14H1v-2h4zm0-3H1v-2h4zm0-3H1V7h4zm0-3H1V4h4zm5 9H6v-2h4zm0-3H6v-2h4zm0-3H6V7h4zm0-3H6V4h4zm5 9h-4v-2h4zm0-3h-4v-2h4zm0-3h-4V7h4zm0-3h-4V4h4z"
        />
    </svg>
);

export const PRINT_TO_PDF_ICON = (
    <svg viewBox="0 0 15 15" fill="none">
        <path
            d="M3.5 12.5h-2a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-2m-8-6v-5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v5m-8 4h8v4h-8z"
            stroke="currentcolor"
        />
    </svg>
);

export const RUN_ICON = (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        strokeWidth="2"
        stroke="currentColor"
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
    >
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <circle cx="13" cy="4" r="1"></circle>
        <path d="M4 17l5 1l.75 -1.5"></path>
        <path d="M15 21l0 -4l-4 -3l1 -6"></path>
        <path d="M7 12l0 -3l5 -1l3 3l3 1"></path>
    </svg>
);

export const LANGUAGE_ICON = (
    <svg
        viewBox="0 0 24 24"
        strokeWidth="2"
        stroke="currentColor"
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
    >
        <path d="M0 0h24v24H0z" stroke="none" />
        <path d="M4 5h7M9 3v2c0 4.418-2.239 8-5 8" />
        <path d="M5 9c-.003 2.144 2.952 3.908 6.7 4M12 20l4-9 4 9M19.1 18h-6.2" />
    </svg>
);

export const CHANGES_ICON = (
    <svg width="24" height="24" viewBox="0 0 13 16">
        <path
            fillRule="evenodd"
            d="M6 7h2v1H6v2H5V8H3V7h2V5h1v2zm-3 6h5v-1H3v1zM7.5 2 11 5.5V15c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h6.5zM10 6 7 3H1v12h9V6zM8.5 0H3v1h5l4 4v8h1V4.5L8.5 0z"
            fill="currentColor"
        />
    </svg>
);

export const VARIABLE_ICON = (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        className="icon icon-tabler icon-tabler-variable"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        strokeWidth="2"
        stroke="currentColor"
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
    >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M5 4c-2.5 5 -2.5 10 0 16m14 -16c2.5 5 2.5 10 0 16m-10 -11h1c1 0 1 1 2.016 3.527c.984 2.473 .984 3.473 1.984 3.473h1" />
        <path d="M8 16c1.5 0 3 -2 4 -3.5s2.5 -3.5 4 -3.5" />
    </svg>
);

export const HIERARCHY_ICON = (
    <svg viewBox="0 0 21 21">
        <g
            fill="none"
            fillRule="evenodd"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
        >
            <path d="M7.5 2.5h6v5h-6zM12.5 13.5h6v5h-6zM2.5 13.5h6v5h-6zM5.498 13.5v-3h10v3M10.5 10.5v-3" />
        </g>
    </svg>
);

export const PROPERTIES_ICON = (
    <svg viewBox="0 96 960 960" fill="currentColor">
        <path d="M427 936V711h60v83h353v60H487v82h-60Zm-307-82v-60h247v60H120Zm187-166v-82H120v-60h187v-84h60v226h-60Zm120-82v-60h413v60H427Zm166-165V216h60v82h187v60H653v83h-60Zm-473-83v-60h413v60H120Z" />
    </svg>
);

export const PALETTE_ICON = (
    <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
    >
        <path stroke="none" d="M0 0h24v24H0z" />
        <path d="M12 21a9 9 0 0 1 0-18c4.97 0 9 3.582 9 8 0 1.06-.474 2.078-1.318 2.828-.844.75-1.989 1.172-3.182 1.172H14a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21" />
        <path d="M7.5 10.5a1 1 0 1 0 2 0 1 1 0 1 0-2 0M11.5 7.5a1 1 0 1 0 2 0 1 1 0 1 0-2 0M15.5 10.5a1 1 0 1 0 2 0 1 1 0 1 0-2 0" />
    </svg>
);

export const COMPONENTS_ICON = (
    <svg viewBox="0 0 21 21">
        <g
            fill="none"
            fillRule="evenodd"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
        >
            <path d="M9.5 5.5h-4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-4M14.5 2.5v6M17.5 5.5h-6" />
        </g>
    </svg>
);

export const PAGES_ICON = (
    <svg viewBox="0 96 960 960" fill="currentColor">
        <path d="M343 636h225v-60H343v60Zm0-90h395v-60H343v60Zm0-90h395v-60H343v60Zm-83 400q-24 0-42-18t-18-42V236q0-24 18-42t42-18h560q24 0 42 18t18 42v560q0 24-18 42t-42 18H260Zm0-60h560V236H260v560ZM140 976q-24 0-42-18t-18-42V296h60v620h620v60H140Zm120-740v560-560Z" />
    </svg>
);

export const PAGE_ICON = (
    <svg viewBox="0 96 960 960" fill="currentColor">
        <path d="M277 777h275v-60H277v60Zm0-171h406v-60H277v60Zm0-171h406v-60H277v60Zm-97 501q-24 0-42-18t-18-42V276q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600V276H180v600Zm0-600v600-600Z" />
    </svg>
);

export const LOG_ICON = (
    <svg viewBox="0 0 76 76" fill="currentColor">
        <path d="M62 31.007c0 1.1-.9 2-2 2H16c-1.1 0-2-.9-2-2s.9-2 2-2h44c1.1 0 2 .9 2 2zm-14.2 8H16c-1.1 0-2 .9-2 2s.9 2 2 2h31.8c1.1 0 2-.9 2-2s-.9-2-2-2zm12.2-20H16c-1.1 0-2 .9-2 2s.9 2 2 2h44c1.1 0 2-.9 2-2s-.9-2-2-2zm16-12v48c0 1.1-.9 2-2 2H35l-13.6 13.4c-.5.6-3.4 1.4-3.4-1.4v-12H2c-1.1 0-2-.9-2-2v-48c0-1.1.9-2 2-2h72c1.1 0 2 .9 2 2zm-4 2H4v44h16c1.1 0 2 .9 2 2v9.2l10.8-10.6c.4-.4.9-.6 1.4-.6H72v-44z" />
    </svg>
);

export const WATCH_PANEL_ICON = (
    <svg viewBox="0 0 28 28">
        <path d="m22.309 13.817-2.6-6.487a.488.488 0 0 0-.111-.168L18.18 5.738l-1.462-3.9a.492.492 0 0 0-.115-.177 2.877 2.877 0 0 0-3.707 0 .5.5 0 0 0-.146.353v4.45a.5.5 0 0 1-.526.5 8.341 8.341 0 0 0-.473-.012.5.5 0 0 1-.5-.5V2.015a.5.5 0 0 0-.147-.353 2.877 2.877 0 0 0-3.707 0 .49.49 0 0 0-.114.177L5.82 5.738 4.4 7.162a.471.471 0 0 0-.11.168l-2.599 6.487a5.5 5.5 0 1 0 9.559 3.7v-5.064a.5.5 0 0 1 .5-.5 5.337 5.337 0 0 1 .551.026.5.5 0 0 1 .45.5v5.038a5.5 5.5 0 1 0 9.559-3.7ZM9.25 17.515a3.5 3.5 0 1 1-3.5-3.5 3.5 3.5 0 0 1 3.5 3.5Zm9 3.5a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5Z" />
    </svg>
);

export const QUEUE_PANEL_ICON = (
    <svg viewBox="0 0 32 32">
        <path d="M28 28H4a2.002 2.002 0 0 1-2-2v-5h2v5h24v-5h2v5a2.002 2.002 0 0 1-2 2Z" />
        <path d="M7 21h18v2H7zM7 16h18v2H7zM7 11h18v2H7zM7 6h18v2H7z" />
        <path d="M0 0h32v32H0z" fill="none" />
    </svg>
);

export const ACTIVE_FLOWS_PANEL_ICON = (
    <svg viewBox="0 0 24 24">
        <path fill="none" d="M0 0h24v24H0z" />
        <path d="M10 2a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H8v2h5V9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-1H8v6h5v-1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-1H7a1 1 0 0 1-1-1V8H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h6zm9 16h-4v2h4v-2zm0-8h-4v2h4v-2zM9 4H5v2h4V4z" />
    </svg>
);

export const BREAKPOINTS_PANEL_ICON = (
    <svg viewBox="0 0 24 24" fill="currentColor">
        <circle cx="12" cy="12" r="8" />
    </svg>
);

export const USER_WIDGET_ICON = (
    <svg
        strokeWidth="2"
        stroke="currentColor"
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
        viewBox="0 0 24 24"
    >
        <path d="M0 0h24v24H0z" stroke="none" />
        <rect x="4" y="4" width="16" height="16" rx="2" />
        <path d="M4 9h8m0 6h8M12 4v16" />
    </svg>
);

export const USER_WIDGETS_ICON = USER_WIDGET_ICON;

export const MATCH_CASE_ICON = (
    <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M7.495 9.052l.891 2.35h1.091L6.237 3h-1.02L2 11.402h1.095l.838-2.35h3.562zM5.811 4.453l.044.135 1.318 3.574H4.255l1.307-3.574.044-.135.038-.156.032-.152.021-.126h.023l.024.126.029.152.038.156zm7.984 6.011v.936h.96V7.498c0-.719-.18-1.272-.539-1.661-.359-.389-.889-.583-1.588-.583-.199 0-.401.019-.606.056a4.875 4.875 0 0 0-1.078.326 2.081 2.081 0 0 0-.343.188v.984c.266-.23.566-.411.904-.54a2.927 2.927 0 0 1 1.052-.193c.188 0 .358.028.513.085a.98.98 0 0 1 .396.267c.109.121.193.279.252.472.059.193.088.427.088.7l-1.811.252c-.344.047-.64.126-.888.237a1.947 1.947 0 0 0-.615.419 1.6 1.6 0 0 0-.36.58 2.134 2.134 0 0 0-.117.721c0 .246.042.475.124.688.082.213.203.397.363.551.16.154.36.276.598.366.238.09.513.135.826.135.402 0 .76-.092 1.075-.278.315-.186.572-.454.771-.806h.023zm-2.128-1.743c.176-.064.401-.114.674-.149l1.465-.205v.609c0 .246-.041.475-.123.688a1.727 1.727 0 0 1-.343.557 1.573 1.573 0 0 1-.524.372 1.63 1.63 0 0 1-.668.135c-.187 0-.353-.025-.495-.076a1.03 1.03 0 0 1-.357-.211.896.896 0 0 1-.22-.316A1.005 1.005 0 0 1 11 9.732a1.6 1.6 0 0 1 .055-.44.739.739 0 0 1 .202-.334 1.16 1.16 0 0 1 .41-.237z"
            fill="%23007bff"
        />
    </svg>
);

export const MATCH_WHOLE_WORD_ICON = (
    <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M1 2h14v1H1V2zm13 2h-1v8h1V4zm-2.728 4.387a2.353 2.353 0 0 0-.36-.786 1.746 1.746 0 0 0-.609-.53 1.832 1.832 0 0 0-.866-.193c-.198 0-.38.024-.547.073a1.76 1.76 0 0 0-.453.205 1.724 1.724 0 0 0-.365.318l-.179.258V4.578H7V12h.893v-.575l.126.175c.087.102.189.19.304.269.117.078.249.14.398.186.149.046.314.068.498.068.353 0 .666-.071.937-.212.272-.143.499-.338.682-.586.183-.25.321-.543.414-.879.093-.338.14-.703.14-1.097a3.756 3.756 0 0 0-.12-.962zM9.793 7.78c.151.071.282.176.39.314.109.14.194.313.255.517.051.174.082.371.089.587l-.007.125c0 .327-.033.62-.1.869a1.886 1.886 0 0 1-.278.614c-.117.162-.26.285-.421.366-.322.162-.76.166-1.069.015a1.264 1.264 0 0 1-.393-.296 1.273 1.273 0 0 1-.218-.367s-.179-.447-.179-.947c0-.5.179-1.002.179-1.002.062-.177.136-.318.224-.43.114-.143.256-.259.424-.345.168-.086.365-.129.587-.129.19 0 .364.037.517.109zM15 13H1v1h14v-1zM2.813 10l-.728 2.031H1l.025-.072 2.441-7.086h.941l2.485 7.158H5.81L5.032 10H2.813zm1.121-3.578h-.022l-.905 2.753h1.841l-.914-2.753z"
            fill="%23007bff"
        />
    </svg>
);

export const REPLACE_SELECTED_ICON = (
    <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.5"
    >
        <path stroke="none" d="M0 0h24v24H0z" />
        <rect width="6" height="6" x="3" y="3" rx="1" />
        <rect width="6" height="6" x="15" y="15" rx="1" />
        <path d="M21 11V8a2 2 0 0 0-2-2h-6l3 3m0-6-3 3M3 13v3a2 2 0 0 0 2 2h6l-3-3m0 6 3-3" />
    </svg>
);

export const REPLACE_ALL_ICON = (
    <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.5"
    >
        <path stroke="none" d="M0 0h24v24H0z" />
        <path
            d="M4.185 7.703h-1.58c-.554 0-1-.446-1-1v-4c0-.554.446-1 1-1h4c.554 0 1 .446 1 1v1.494"
            strokeWidth="1.5"
            strokeLinecap="butt"
            strokeLinejoin="bevel"
        />
        <rect
            width="6"
            height="6"
            x="3.912"
            y="3.956"
            rx="1"
            strokeWidth="1.5"
        />
        <path
            d="M16.61 20.277h-1.58c-.555 0-1-.446-1-1v-4c0-.554.445-1 1-1h4c.553 0 1 .446 1 1v1.494"
            strokeWidth="1.5"
            strokeLinecap="butt"
            strokeLinejoin="bevel"
        />
        <rect
            width="6"
            height="6"
            x="16.337"
            y="16.531"
            rx="1"
            strokeWidth="1.5"
        />
        <path d="M21 11V8a2 2 0 0 0-2-2h-6l3 3m0-6-3 3M3 13v3a2 2 0 0 0 2 2h6l-3-3m0 6 3-3" />
    </svg>
);

export const DASHBOARD_PROJECT_ICON = (size: number) => (
    <svg viewBox="0 0 560 510" width={size} height={size}>
        <g>
            <path
                d="M509.09 0A50.91 50.91 0 0 1 560 50.91v305.454a50.91 50.91 0 0 1-50.91 50.909H330.91v50.909h50.908v50.909H178.182v-50.91h50.909v-50.908H50.909C22.655 407.273 0 384.363 0 356.363V50.91A50.733 50.733 0 0 1 50.91 0h458.18"
                strokeWidth="25.4545"
                fill="#adb5bd"
                fillOpacity="1"
            />
            <path
                d="M527.5 368.937h-495v-334h495z"
                fill="#fefefe"
                fillOpacity="1"
                strokeWidth="1.23022"
            />
            <path
                d="M54.633 102.161h70v70h-70zM54.592 192.49h70v70h-70zM54.93 281.458h70v70h-70z"
                fill="#502d16"
                fillOpacity="1"
                strokeWidth="24.7486"
            />
            <path
                d="M32.5 34.937h495v46h-495v-46"
                fill="#d4aa00"
                fillOpacity="1"
                strokeWidth="22.4944"
            />
            <circle
                cx={240.475}
                cy={182.325}
                r={68.5}
                fill="#502d16"
                fillOpacity="1"
                stroke="#000"
                strokeWidth="0"
                strokeLinecap="square"
                strokeOpacity="1"
                paintOrder="fill markers stroke"
            />
            <circle
                cx={414.7}
                cy={182.325}
                r={68.5}
                fill="#502d16"
                fillOpacity="1"
                stroke="#000"
                strokeWidth="0"
                strokeLinecap="square"
                strokeOpacity="1"
                paintOrder="fill markers stroke"
            />
        </g>
    </svg>
);

export const EEZ_GUI_PROJECT_ICON = (size: number) => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="-20 -20 601 448"
        width={size}
        height={size}
    >
        <g>
            <path
                d="M510 0H51C22.95 0 0 22.95 0 51v306c0 28.05 22.95 51 51 51h459c28.05 0 51-22.95 51-51V51c0-28.05-22.95-51-51-51Z"
                fill="#adb5bd"
                fillOpacity="1"
            />
        </g>
        <g>
            <path
                d="M527.987 370.963h-495v-334h495z"
                fill="#434667"
                fillOpacity="1"
                strokeWidth="1.23022"
            />
        </g>
        <g>
            <path
                d="M55.12 104.188h70v70h-70Zm-.04 90.328h70v70h-70Zm.336 88.969h70v70h-70z"
                fill="#adb5bd"
                fillOpacity="1"
                strokeWidth="24.7486"
            />
            <path
                d="M32.987 36.963h495v46h-495v-46"
                fill="#c05fb1"
                fillOpacity="1"
                strokeWidth="22.4944"
            />
            <g transform="translate(0 -7.283)">
                <circle
                    cx={240.961}
                    cy={191.635}
                    r={68.5}
                    fill="#adb5bd"
                    fillOpacity="1"
                    stroke="#000"
                    strokeWidth="0"
                    strokeLinecap="square"
                    strokeOpacity="1"
                    paintOrder="fill markers stroke"
                />
                <circle
                    cx={415.187}
                    cy={191.635}
                    r={68.5}
                    fill="#adb5bd"
                    fillOpacity="1"
                    stroke="#000"
                    strokeWidth="0"
                    strokeLinecap="square"
                    strokeOpacity="1"
                    paintOrder="fill markers stroke"
                />
            </g>
        </g>
    </svg>
);

export const EEZ_GUI_LITE_PROJECT_ICON = (size: number) => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="-20 -20 448 448"
        width={size}
        height={size}
    >
        <g>
            <rect
                width={408}
                height={408}
                rx={51}
                fill="#adb5bd"
                fillOpacity="1"
            />
        </g>
        <g>
            <rect
                x={32.987}
                y={36.963}
                width={342}
                height={334}
                fill="#434667"
                fillOpacity="1"
            />
        </g>
        <g>
            <path
                d="M75 137h70v70h-70Zm0 100h70v70h-70z"
                fill="#adb5bd"
                fillOpacity="1"
                strokeWidth="24.7486"
            />
            <path
                d="M32.987 36.963h342v46h-342v-46"
                fill="#c05fb1"
                fillOpacity="1"
                strokeWidth="22.4944"
            />
            <g transform="translate(0 -7.283)">
                <circle
                    cx={264}
                    cy={234.246}
                    r={68.5}
                    fill="#adb5bd"
                    fillOpacity="1"
                    stroke="#000"
                    strokeWidth="0"
                    strokeLinecap="square"
                    strokeOpacity="1"
                    paintOrder="fill markers stroke"
                />
            </g>
        </g>
    </svg>
);

export const LVGL_PROJECT_ICON = (size: number) => (
    <svg viewBox="-20 -20 601 448" width={size} height={size}>
        <g>
            <path
                d="M510 0H51C22.95 0 0 22.95 0 51v306c0 28.05 22.95 51 51 51h459c28.05 0 51-22.95 51-51V51c0-28.05-22.95-51-51-51"
                fill="#adb5bd"
            />
        </g>
        <g>
            <path
                d="M527.987 370.963h-495v-334h495z"
                fill="#ececec"
                strokeWidth={1.23022}
            />
        </g>
        <image
            width={246.031}
            height={245.211}
            preserveAspectRatio="none"
            xlinkHref="data:image/png;base64,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"
            x={157.471}
            y={81.358}
        />
    </svg>
);

export const LVGL_WITH_FLOW_PROJECT_ICON = (size: number) => (
    <svg viewBox="-20 -20 601 448" width={size} height={size}>
        <g
            style={{
                display: "inline"
            }}
        >
            <path
                d="M510 0H51C22.95 0 0 22.95 0 51v306c0 28.05 22.95 51 51 51h459c28.05 0 51-22.95 51-51V51c0-28.05-22.95-51-51-51"
                style={{
                    display: "inline",
                    fill: "#adb5bd",
                    fillOpacity: 1
                }}
            />
        </g>
        <g
            style={{
                display: "inline"
            }}
        >
            <path
                d="M527.987 370.963h-495v-334h495z"
                style={{
                    display: "inline",
                    fill: "#ececec",
                    fillOpacity: 1,
                    strokeWidth: 1.23022
                }}
            />
            <path
                style={{
                    display: "inline",
                    fill: "#343839",
                    fillOpacity: 1,
                    strokeWidth: 0,
                    strokeLinecap: "square",
                    paintOrder: "fill markers stroke"
                }}
                d="M182.144 81.934a22.93 22.93 0 0 0-22.978 22.977v41.354a8.916 8.916 0 0 0 8.936 8.935h11.621q1.194.126 2.421.127h147.307v147.688c0 .853.052 1.693.142 2.521v11.521a8.916 8.916 0 0 0 8.936 8.936h41.338a22.93 22.93 0 0 0 22.978-22.978v-168.13c.09-.832.142-1.678.142-2.535v-27.44a22.93 22.93 0 0 0-22.978-22.977zm184.327 23.247c7.402 0 13.403 6 13.403 13.403s-6 13.404-13.403 13.404-13.404-6-13.404-13.404c0-7.402 6-13.403 13.404-13.403"
            />
            <path
                style={{
                    display: "inline",
                    fill: "#343839",
                    fillOpacity: 1,
                    strokeWidth: 0,
                    strokeLinecap: "square",
                    paintOrder: "fill markers stroke"
                }}
                d="M232.918 150.717h102.124v102.124H232.918z"
            />
            <rect
                style={{
                    display: "inline",
                    fill: "#fff",
                    strokeWidth: 0,
                    strokeLinecap: "square",
                    paintOrder: "fill markers stroke"
                }}
                width={85.763}
                height={85.366}
                x={243.75}
                y={240.628}
                rx={10}
                ry={10}
            />
            <rect
                style={{
                    display: "inline",
                    fill: "#fff",
                    strokeWidth: 0,
                    strokeLinecap: "square",
                    paintOrder: "fill markers stroke"
                }}
                width={85.763}
                height={85.366}
                x={157.987}
                y={155.18}
                rx={10}
                ry={10}
            />
            <rect
                style={{
                    display: "inline",
                    fill: "#fff",
                    strokeWidth: 0,
                    strokeLinecap: "square",
                    paintOrder: "fill markers stroke"
                }}
                width={85.763}
                height={85.366}
                x={182.494}
                y={217.94}
                rx={10}
                ry={10}
            />
            <rect
                style={{
                    display: "inline",
                    fill: "#343839",
                    fillOpacity: 1,
                    strokeWidth: 0,
                    strokeLinecap: "square",
                    paintOrder: "fill markers stroke"
                }}
                width={139.17}
                height={151.467}
                x={243.75}
                y={89.161}
                rx={7}
                ry={7}
            />
            <rect
                style={{
                    fill: "#62d367",
                    fillOpacity: 1,
                    strokeWidth: 0,
                    strokeLinecap: "square",
                    paintOrder: "fill markers stroke"
                }}
                width={75.316}
                height={75.316}
                x={159.166}
                y={250.677}
                rx={7}
                ry={7}
            />
            <rect
                style={{
                    display: "inline",
                    fill: "#f35f20",
                    fillOpacity: 1,
                    strokeWidth: 0,
                    strokeLinecap: "square",
                    paintOrder: "fill markers stroke"
                }}
                width={75.316}
                height={75.316}
                x={159.166}
                y={165.311}
                rx={7}
                ry={7}
            />
            <rect
                style={{
                    display: "inline",
                    fill: "#3c65f8",
                    fillOpacity: 1,
                    strokeWidth: 0,
                    strokeLinecap: "square",
                    paintOrder: "fill markers stroke"
                }}
                width={75.316}
                height={75.316}
                x={243.75}
                y={250.677}
                rx={7}
                ry={7}
            />
        </g>
        <g
            style={{
                display: "inline"
            }}
        >
            <path
                style={{
                    fill: "#cad4ff",
                    fillOpacity: 1,
                    fillRule: "nonzero",
                    stroke: "none",
                    strokeWidth: 2.24416,
                    strokeMiterlimit: 4,
                    strokeDasharray: "none",
                    strokeOpacity: 1
                }}
                d="M371.231 120.321a23.73 23.73 0 0 1-6.524 11.556 23.93 23.93 0 0 1-11.742 6.284v.005a1.986 1.986 0 0 1-2.315-2.512c.93-4.558-.06-8.997-2.007-12.997-2.71-5.568-7.265-10.285-11.182-13.36-3.482-2.734-5.528-5.424-6.526-7.9-.912-2.265-.966-4.37-.433-6.204l-.005-.002q.022-.083.054-.162c.558-1.78 1.663-3.258 3.067-4.35a10.2 10.2 0 0 1 5.307-2.08c2.778-.246 5.698.006 8.593.69 5.724 1.353 11.47 4.398 15.921 8.583 4.526 4.255 7.73 9.704 8.271 15.79a20.8 20.8 0 0 1-.48 6.66"
            />
            <g
                style={{
                    fill: "#6570ab",
                    fillOpacity: 1,
                    stroke: "#fff",
                    strokeWidth: 136.83086511,
                    strokeMiterlimit: 4,
                    strokeDasharray: "none",
                    strokeOpacity: 1
                }}
            >
                <path
                    style={{
                        fill: "#6570ab",
                        fillOpacity: 1,
                        fillRule: "nonzero",
                        stroke: "#fff",
                        strokeWidth: 136.83086511,
                        strokeMiterlimit: 4,
                        strokeDasharray: "none",
                        strokeOpacity: 1
                    }}
                    d="M10620.3 4809.16c-595.7 320.63-1058.97 792.07-1367.94 1341.93-318.52 566.87-472.39 1217.65-437.75 1872.71l-.63.03c8.36 158.08 143.29 279.47 301.37 271.1 49.8-2.63 95.96-17.83 135.57-42.36 600.97-299.95 1257.08-327.87 1887.78-205.75 877.9 170.02 1706.1 628.99 2281.4 1060.37 511.5 383.52 963.1 568.36 1345.8 614.96 350 42.6 645.5-28.48 881.5-171.36l.4.64c7.1-4.32 14-8.92 20.6-13.74 227.4-144.29 392.3-353.7 492.1-590.26 107.6-255.16 139.5-544.68 91.7-817.94-69.4-396.75-213.9-794.51-417.4-1172.81-402.5-747.78-1042-1435.38-1792.1-1899.89-762.6-472.29-1642.3-715.56-2511.6-563.54-310.1 54.23-615.8 157.15-910.8 315.91"
                    transform="scale(.0073 -.0073)rotate(15 135395.97 138448.9)"
                />
            </g>
            <path
                style={{
                    fill: "#222d59",
                    fillOpacity: 1,
                    fillRule: "nonzero",
                    stroke: "#fff",
                    strokeWidth: 1,
                    strokeMiterlimit: 4,
                    strokeDasharray: "none"
                }}
                d="M314.587 156.709a25.03 25.03 0 0 1 6.886-12.195 25.26 25.26 0 0 1 12.391-6.633v-.005a2.094 2.094 0 0 1 2.44 2.651c-.981 4.81.063 9.495 2.118 13.716 2.86 5.876 7.667 10.854 11.8 14.1 3.675 2.885 5.834 5.723 6.887 8.336.963 2.39 1.02 4.61.458 6.547l.005.002-.059.171c-.588 1.878-1.754 3.439-3.235 4.59a10.76 10.76 0 0 1-5.6 2.195c-2.933.261-6.014-.005-9.07-.728-6.039-1.427-12.103-4.64-16.8-9.057-4.777-4.49-8.158-10.24-8.73-16.664a22 22 0 0 1 .508-7.027"
            />
            <path
                style={{
                    fill: "#fff",
                    fillOpacity: 1,
                    fillRule: "nonzero",
                    stroke: "none",
                    strokeWidth: 2.36831,
                    strokeMiterlimit: 4,
                    strokeDasharray: "none",
                    strokeOpacity: 1
                }}
                d="M325.307 110.665a24.33 24.33 0 0 1 11.854 6.693 24.55 24.55 0 0 1 6.447 12.045h.003a2.036 2.036 0 0 1-2.577 2.37c-4.675-.953-9.229.062-13.332 2.06-5.711 2.78-10.55 7.452-13.705 11.47-2.805 3.572-5.564 5.67-8.104 6.694-2.323.936-4.482.992-6.363.445l-.001.005a1 1 0 0 1-.167-.056c-1.826-.572-3.342-1.705-4.462-3.146a10.46 10.46 0 0 1-2.133-5.444c-.254-2.85.005-5.845.708-8.814 1.386-5.872 4.51-11.766 8.803-16.332 4.365-4.643 9.953-7.93 16.198-8.485a21.4 21.4 0 0 1 6.83.493"
            />
        </g>
    </svg>
);

export const IEXT_PROJECT_ICON = (size: number) => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        width={size}
        height={size}
        viewBox="0 0 560 510"
    >
        <path
            d="M509.09 0A50.91 50.91 0 0 1 560 50.91v305.454a50.91 50.91 0 0 1-50.91 50.909H330.91v50.909h50.908v50.909H178.182v-50.91h50.909v-50.908H50.909C22.655 407.273 0 384.363 0 356.363V50.91A50.733 50.733 0 0 1 50.91 0h458.18"
            fill="#adb5bd"
            strokeWidth="25.4545"
        />
        <path
            d="M1614.667 300.1h462.272v309.378h-462.272z"
            fill="#333"
            stroke="#000"
            strokeWidth="1.46269"
            strokeLinecap="square"
            paintOrder="fill"
            transform="matrix(1.06742 0 0 1.0745 -1690.248 -286.735)"
        />
        <path
            d="M1676.099 610.21h-2.936V299.367h2.936V610.21M1770.864 610.21h-2.936V299.367h2.936V610.21M1865.628 610.21h-2.936V299.367h2.936V610.21"
            fill="#636b76"
            fillRule="evenodd"
            stroke="none"
            strokeWidth=".0164308"
            transform="matrix(1.06742 0 0 1.0745 -1690.248 -286.735)"
        />
        <path
            d="M1613.936 363.974v-2.936h463.734v2.936h-463.734M1613.936 458.74v-2.937h463.734v2.937h-463.734M1613.936 553.505v-2.938h463.734v2.938h-463.734"
            fill="#636b76"
            fillRule="evenodd"
            stroke="none"
            strokeWidth=".0164308"
            transform="matrix(1.06742 0 0 1.0745 -1690.248 -286.735)"
        />
        <path
            d="M1909.211 520.658c1.7 0 3.267-.825 4.117-2.166l37.13-58.556 27.488 43.34c.85 1.339 2.417 2.163 4.123 2.163 1.7 0 3.266-.824 4.115-2.164l38.554-60.8 14.694 49.821c.556 1.892 2.443 3.21 4.593 3.21h28.038c2.622 0 4.756-1.943 4.756-4.33 0-2.39-2.134-4.33-4.756-4.33h-24.392l-16.7-56.73c-.5-1.69-2.067-2.942-3.973-3.172-1.904-.228-3.783.615-4.737 2.13l-40.181 63.364-27.493-43.343c-.85-1.343-2.417-2.164-4.117-2.164-1.7 0-3.272.826-4.117 2.164l-35.508 56.001-30.199-102.594c-.494-1.69-2.06-2.942-3.965-3.168-1.895-.229-3.785.62-4.745 2.13l-65.382 103.096-33.095-112.441c-.556-1.891-2.446-3.21-4.597-3.21-2.157 0-4.03 1.314-4.59 3.21l-31.075 105.578-20.613-75.031c-.439-1.606-1.841-2.85-3.622-3.19-1.79-.338-3.625.266-4.747 1.58l-42.436 49.667h-42.23c-2.626 0-4.756 1.94-4.756 4.332 0 2.393 2.13 4.332 4.755 4.332l44.559.005c1.472 0 2.855-.62 3.755-1.675l37.865-44.312 22.689 82.624c.523 1.908 2.39 3.278 4.615 3.283 2.151 0 4.037-1.31 4.593-3.206l31.235-106.132 31.465 106.936c.5 1.699 2.083 2.933 3.996 3.171 1.917.238 3.756-.606 4.72-2.13l65.385-103.097 30.193 102.592c.5 1.7 2.083 2.939 3.994 3.176.2.021.399.036.6.036"
            fill="#facd08"
            fillRule="evenodd"
            stroke="none"
            strokeWidth=".0172205"
            transform="matrix(1.06742 0 0 1.0745 -1690.248 -286.735)"
        />
        <path
            d="M1960.394 610.21h-2.936V299.367h2.936V610.21M2055.159 610.21h-2.936V299.367h2.936V610.21"
            fill="#636b76"
            fillRule="evenodd"
            stroke="none"
            strokeWidth=".0164308"
            transform="matrix(1.06742 0 0 1.0745 -1690.248 -286.735)"
        />
    </svg>
);

export const APPLET_ICON = (size: number) => (
    <svg
        viewBox="-10 -10 581 428"
        width={size}
        height={size}
        fill="currentColor"
    >
        <g>
            <path
                d="M510 0H51C22.95 0 0 22.95 0 51v306c0 28.05 22.95 51 51 51h459c28.05 0 51-22.95 51-51V51c0-28.05-22.95-51-51-51Z"
                fill="#AFD0FF"
                fillOpacity="1"
            />
        </g>
        <g>
            <path
                d="M527.987 370.963h-495v-334h495z"
                fill="#000"
                fillOpacity="1"
                strokeWidth="1.23022"
            />
        </g>
        <g>
            <path
                d="M32.987 324.963h495v46h-495v-46"
                fill="#adb5bd"
                fillOpacity="1"
                strokeWidth="22.4944"
            />
            <path
                d="M62.813 63.485h121.444v168.97H62.813Z"
                fill="#adb5bd"
                fillOpacity="1"
                strokeWidth="50.6461"
            />
            <circle
                cx={155.38}
                cy={280.845}
                r={23.597}
                fill="#adb5bd"
                fillOpacity="1"
                stroke="#000"
                strokeWidth="0"
                strokeLinecap="square"
                strokeOpacity="1"
                paintOrder="fill markers stroke"
            />
            <circle
                cx={91.69}
                cy={280.845}
                r={23.597}
                fill="#FFD800"
                fillOpacity="1"
                stroke="#000"
                strokeWidth="0"
                strokeLinecap="square"
                strokeOpacity="1"
                paintOrder="fill markers stroke"
            />
            <path
                d="M219.765 63.485h121.444v168.97H219.765Z"
                fill="#adb5bd"
                fillOpacity="1"
                strokeWidth="50.6461"
            />
            <circle
                cx={312.332}
                cy={280.845}
                r={23.597}
                fill="#FF6A00"
                fillOpacity="1"
                stroke="#000"
                strokeWidth="0"
                strokeLinecap="square"
                strokeOpacity="1"
                paintOrder="fill markers stroke"
            />
            <circle
                cx={248.642}
                cy={280.845}
                r={23.597}
                fill="#adb5bd"
                fillOpacity="1"
                stroke="#000"
                strokeWidth="0"
                strokeLinecap="square"
                strokeOpacity="1"
                paintOrder="fill markers stroke"
            />
            <path
                d="M376.716 63.485H498.16v168.97H376.716Z"
                fill="#adb5bd"
                fillOpacity="1"
                strokeWidth="50.6461"
            />
            <circle
                cx={469.284}
                cy={280.845}
                r={23.597}
                fill="#adb5bd"
                fillOpacity="1"
                stroke="#000"
                strokeWidth="0"
                strokeLinecap="square"
                strokeOpacity="1"
                paintOrder="fill markers stroke"
            />
            <circle
                cx={405.593}
                cy={280.845}
                r={23.597}
                fill="#adb5bd"
                fillOpacity="1"
                stroke="#000"
                strokeWidth="0"
                strokeLinecap="square"
                strokeOpacity="1"
                paintOrder="fill markers stroke"
            />
        </g>
    </svg>
);

export const MICROPYTHON_ICON = (size: number) => (
    <svg
        viewBox="-30 -30 402 402"
        width={size}
        height={size}
        fill="currentColor"
    >
        <path d="M0 0h164v267h14V0h164v342h-75V75h-14v267H89V75l-14 .5V342H0Zm317 278h-20v34h20z" />
    </svg>
);

export const PYTHON_ICON = (
    <svg
        strokeWidth="2"
        stroke="currentColor"
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
        viewBox="0 0 24 24"
    >
        <path d="M0 0h24v24H0z" stroke="none" />
        <path d="M12 9H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h3m4-2h7a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3" />
        <path d="M8 9V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4m-5-9v.01M13 18v.01" />
    </svg>
);

export const JSON_ICON = (
    <svg viewBox="0 0 58 58" fill="currentColor">
        <path d="m50.949 12.187-1.361-1.361-9.504-9.505-.002-.001-.77-.771A1.867 1.867 0 0 0 37.985 0H8.963C7.776 0 6.5.916 6.5 2.926V56c0 .837.841 1.652 1.836 1.909.051.014.1.033.152.043.156.031.315.048.475.048h40.074c.16 0 .319-.017.475-.048.052-.01.101-.029.152-.043.995-.257 1.836-1.072 1.836-1.909V13.978c0-.767-.093-1.334-.551-1.791zM39.5 3.565 47.935 12H39.5V3.565zM8.963 56c-.071 0-.135-.025-.198-.049a.46.46 0 0 1-.265-.414V41h41v14.537a.46.46 0 0 1-.265.414c-.063.024-.127.049-.198.049H8.963zM8.5 39V2.926c0-.217.033-.926.463-.926h28.595a1.54 1.54 0 0 0-.058.391V13.78a2.976 2.976 0 0 0-2-.78 1 1 0 1 0 0 2c.552 0 1 .449 1 1v4c0 1.2.542 2.266 1.382 3a3.975 3.975 0 0 0-1.382 3v4c0 .551-.448 1-1 1a1 1 0 1 0 0 2c1.654 0 3-1.346 3-3v-4c0-1.103.897-2 2-2a1 1 0 1 0 0-2c-1.103 0-2-.897-2-2v-4a2.98 2.98 0 0 0-.78-2h11.389c.135 0 .265-.025.391-.058l.001.036V39H8.5z" />
        <path d="M16.354 51.43c-.019.446-.171.764-.458.95s-.672.28-1.155.28c-.191 0-.396-.022-.615-.068s-.429-.098-.629-.157-.385-.123-.554-.191-.299-.135-.39-.198l-.697 1.107c.183.137.405.26.67.369s.54.207.827.294.565.15.834.191.504.062.704.062c.401 0 .791-.039 1.169-.116.378-.077.713-.214 1.005-.41s.524-.456.697-.779.26-.723.26-1.196V43.72h-1.668v7.71zM25.083 49.064c-.314-.228-.654-.422-1.019-.581s-.702-.323-1.012-.492-.569-.364-.779-.588-.314-.518-.314-.882c0-.146.036-.299.109-.458s.173-.303.301-.431.273-.234.438-.321.337-.139.52-.157c.328-.027.597-.032.807-.014s.378.05.506.096.226.091.294.137.13.082.185.109c.009-.009.036-.055.082-.137s.101-.185.164-.308l.205-.396a8.49 8.49 0 0 0 .191-.39c-.265-.173-.61-.299-1.039-.376s-.853-.116-1.271-.116c-.41 0-.8.063-1.169.191s-.692.313-.971.554-.499.535-.663.882-.248.744-.248 1.19c0 .492.104.902.314 1.23s.474.613.793.854.661.451 1.025.629.704.355 1.019.533.576.376.786.595.314.483.314.793c0 .511-.148.896-.444 1.155s-.723.39-1.278.39c-.183 0-.378-.019-.588-.055s-.419-.084-.629-.144-.412-.123-.608-.191-.357-.139-.485-.212l-.287 1.176c.155.137.34.253.554.349s.439.171.677.226c.237.055.472.094.704.116s.458.034.677.034c.511 0 .966-.077 1.367-.232s.738-.362 1.012-.622.485-.561.636-.902.226-.695.226-1.06c0-.538-.104-.978-.314-1.319s-.474-.627-.788-.855zM34.872 45.072c-.378-.429-.82-.754-1.326-.978s-1.06-.335-1.661-.335-1.155.111-1.661.335-.948.549-1.326.978-.675.964-.889 1.606-.321 1.388-.321 2.235.107 1.595.321 2.242.511 1.185.889 1.613.82.752 1.326.971 1.06.328 1.661.328 1.155-.109 1.661-.328.948-.542 1.326-.971.675-.966.889-1.613.321-1.395.321-2.242-.107-1.593-.321-2.235-.511-1.177-.889-1.606zm-.677 5.626c-.137.487-.326.882-.567 1.183s-.515.518-.82.649-.627.198-.964.198c-.328 0-.641-.07-.937-.212s-.561-.364-.793-.67-.415-.699-.547-1.183-.203-1.066-.212-1.75c.009-.702.082-1.294.219-1.777.137-.483.326-.877.567-1.183s.515-.521.82-.649.627-.191.964-.191c.328 0 .641.068.937.205s.561.36.793.67.415.704.547 1.183.203 1.06.212 1.743c-.009.702-.082 1.297-.219 1.784zM44.012 50.869l-3.951-6.945h-1.668V54h1.668v-6.945L44.012 54h1.668V43.924h-1.668zM20.5 20v-4c0-.551.448-1 1-1a1 1 0 1 0 0-2c-1.654 0-3 1.346-3 3v4c0 1.103-.897 2-2 2a1 1 0 1 0 0 2c1.103 0 2 .897 2 2v4c0 1.654 1.346 3 3 3a1 1 0 1 0 0-2c-.552 0-1-.449-1-1v-4c0-1.2-.542-2.266-1.382-3a3.975 3.975 0 0 0 1.382-3z" />
        <circle cx="28.5" cy="19.5" r="1.5" />
        <path d="M28.5 25a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0v-3a1 1 0 0 0-1-1z" />
    </svg>
);

export const CSV_ICON = (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 15 15"
        fill="currentColor"
    >
        <path d="M13.5 3.5h.5v-.207l-.146-.147-.354.354Zm-3-3 .354-.354L10.707 0H10.5v.5Zm-4 6V6H6v.5h.5Zm0 2H6V9h.5v-.5Zm2 0H9V8h-.5v.5Zm0 2v.5H9v-.5h-.5Zm2-1H10v.207l.146.147.354-.354Zm1 1-.354.354.354.353.354-.353-.354-.354Zm1-1 .354.354.146-.147V9.5h-.5Zm-10-3V6H2v.5h.5Zm0 4H2v.5h.5v-.5ZM2 5V1.5H1V5h1Zm11-1.5V5h1V3.5h-1ZM2.5 1h8V0h-8v1Zm7.646-.146 3 3 .708-.708-3-3-.708.708ZM2 1.5a.5.5 0 0 1 .5-.5V0A1.5 1.5 0 0 0 1 1.5h1ZM1 12v1.5h1V12H1Zm1.5 3h10v-1h-10v1ZM14 13.5V12h-1v1.5h1ZM12.5 15a1.5 1.5 0 0 0 1.5-1.5h-1a.5.5 0 0 1-.5.5v1ZM1 13.5A1.5 1.5 0 0 0 2.5 15v-1a.5.5 0 0 1-.5-.5H1ZM9 6H6.5v1H9V6Zm-3 .5v2h1v-2H6ZM6.5 9h2V8h-2v1ZM8 8.5v2h1v-2H8Zm.5 1.5H6v1h2.5v-1ZM10 6v3.5h1V6h-1Zm.146 3.854 1 1 .708-.708-1-1-.708.708Zm1.708 1 1-1-.708-.708-1 1 .708.708ZM13 9.5V6h-1v3.5h1ZM5 6H2.5v1H5V6Zm-3 .5v4h1v-4H2Zm.5 4.5H5v-1H2.5v1Z" />
    </svg>
);

export const SWITCH_WIDGET_ICON = (
    <svg
        viewBox="0 0 24 24"
        strokeWidth="2"
        stroke="currentColor"
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
    >
        <path d="M0 0h24v24H0z" stroke="none" />
        <circle cx="8" cy="12" r="2" />
        <rect x="2" y="6" width="20" height="12" rx="6" />
    </svg>
);

export const FOLDER_ICON = (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
        <rect
            width="25"
            height="16"
            x="3"
            y="12"
            rx="1.25"
            ry="1.25"
            opacity=".2"
        />
        <path
            d="M3 21.75c0 .692.558 1.25 1.25 1.25h22.5c.692 0 1.25-.558 1.25-1.25V8.25C28 7.558 27.442 7 26.75 7H14v-.75C14 5.558 13.443 5 12.75 5h-8.5C3.558 5 3 5.558 3 6.25"
            fill="#dd772f"
        />
        <rect
            width="25"
            height="16"
            x="3"
            y="10"
            rx="1.25"
            ry="1.25"
            opacity=".2"
        />
        <rect
            width="21"
            height="10"
            x="5"
            y="9"
            rx="1.25"
            ry="1.25"
            fill="#e4e4e4"
        />
        <rect
            width="25"
            height="16"
            x="3"
            y="11"
            rx="1.25"
            ry="1.25"
            fill="#ee923a"
        />
        <path
            d="M4.25 5C3.558 5 3 5.558 3 6.25v1C3 6.558 3.558 6 4.25 6h8.5c.693 0 1.25.558 1.25 1.25V8h12.75c.692 0 1.25.557 1.25 1.25v-1C28 7.558 27.442 7 26.75 7H14v-.75C14 5.558 13.443 5 12.75 5h-8.5z"
            opacity=".1"
            fill="#fff"
        />
    </svg>
);

export const SERIAL_STATUS_ICON = (
    <svg viewBox="0 0 68.792 34.396">
        <g transform="translate(-21.422 -163.072)" fill="none">
            <circle
                style={{
                    opacity: 1,
                    fill: "currentColor",
                    fillOpacity: 0,
                    stroke: "currentColor",
                    strokeWidth: "1.5",
                    strokeLinecap: "round",
                    strokeLinejoin: "miter",
                    strokeMiterlimit: 4,
                    strokeDasharray: "none",
                    strokeDashoffset: 0,
                    strokeOpacity: 1,
                    paintOrder: "fill markers stroke"
                }}
                cx="43.765"
                cy="180.27"
                r="7.955"
            />
            <circle
                style={{
                    opacity: 1,
                    fill: "currentColor",
                    fillOpacity: 0,
                    stroke: "currentColor",
                    strokeWidth: "1.5",
                    strokeLinecap: "round",
                    strokeLinejoin: "miter",
                    strokeMiterlimit: 4,
                    strokeDasharray: "none",
                    strokeDashoffset: 0,
                    strokeOpacity: 1,
                    paintOrder: "fill markers stroke"
                }}
                cx="67.686"
                cy="180.27"
                r="7.955"
            />
        </g>
        <path
            d="M31.674 171.406v17.728M55.726 171.406v17.728M79.96 171.406v17.728"
            style={{
                fill: "none",
                fillRule: "evenodd",
                stroke: "currentColor",
                strokeWidth: "1.5",
                strokeLinecap: "butt",
                strokeLinejoin: "miter",
                strokeMiterlimit: 4,
                strokeDasharray: "none",
                strokeOpacity: 1
            }}
            transform="translate(-21.422 -163.072)"
        />
    </svg>
);

export const SERIAL_CONNECT_ICON = (
    <svg viewBox="0 0 68.792 34.396">
        <g fill="none" stroke="currentColor" strokeWidth="1.5">
            <g
                transform="translate(-29.444 -163.072)"
                strokeLinecap="round"
                paintOrder="fill markers stroke"
            >
                <circle cx="43.765" cy="180.27" r="7.955" />
                <circle cx="67.686" cy="180.27" r="7.955" />
            </g>
            <path d="M2.23 8.334v17.727M26.282 8.334v17.727M50.517 8.334v17.727" />
        </g>
        <path
            d="m65.856 287.11-7.525 7.526-4.181-4.18v-5.018l4.18 4.168 7.526-7.513z"
            transform="translate(0 -262.604)"
            style={{
                lineHeight: "129.99999523%",
                fontVariantLigatures: "normal",
                fontVariantCaps: "normal",
                fontVariantNumeric: "normal",
                fontFeatureSettings: "normal",
                textAlign: "start"
            }}
            fontWeight={400}
            fontSize="26.758"
            fontFamily="Webdings"
            letterSpacing={0}
            wordSpacing={0}
            strokeWidth=".794"
        />
    </svg>
);

export const SERIAL_DISCONNECT_ICON = (
    <svg viewBox="0 0 68.792 34.396">
        <g stroke="currentColor">
            <g fill="none" strokeWidth="1.5">
                <g
                    transform="translate(-29.444 -163.072)"
                    strokeLinecap="round"
                    paintOrder="fill markers stroke"
                >
                    <circle cx="43.765" cy="180.27" r="7.955" />
                    <circle cx="67.686" cy="180.27" r="7.955" />
                </g>
                <path d="M2.23 8.334v17.727M26.282 8.334v17.727M50.517 8.334v17.727" />
            </g>
            <path
                d="M66.51 294.872h-1.859l-4.648-4.59-4.59 4.59h-1.917v-1.86l4.59-4.647-4.59-4.59v-1.918h1.917l4.59 4.59 4.648-4.59h1.86v1.918l-4.59 4.59 4.59 4.59z"
                transform="translate(0 -262.604)"
                style={{
                    lineHeight: "129.99999523%",
                    fontVariantLigatures: "normal",
                    fontVariantCaps: "normal",
                    fontVariantNumeric: "normal",
                    fontFeatureSettings: "normal",
                    textAlign: "start"
                }}
                fontWeight={400}
                fontSize="19.832"
                fontFamily="Webdings"
                letterSpacing={0}
                wordSpacing={0}
                strokeWidth=".794"
            />
        </g>
    </svg>
);

export const SERIAL_READ_ICON = (
    <svg viewBox="0 0 68.792 34.396">
        <g stroke="currentColor">
            <g fill="none" strokeWidth="1.5">
                <g
                    transform="translate(-14.994 -163.072)"
                    strokeLinecap="round"
                    paintOrder="fill markers stroke"
                >
                    <circle cx="43.765" cy="180.27" r="7.955" />
                    <circle cx="67.686" cy="180.27" r="7.955" />
                </g>
                <path d="M16.68 8.334v17.727M40.731 8.334v17.727M64.967 8.334v17.727" />
            </g>
            <path
                d="m11.939 279.802-8.362 8.362V271.44z"
                transform="translate(0 -262.604)"
                style={{
                    lineHeight: "129.99999523%",
                    fontVariantLigatures: "normal",
                    fontVariantCaps: "normal",
                    fontVariantNumeric: "normal",
                    fontFeatureSettings: "normal",
                    textAlign: "start"
                }}
                fontWeight={400}
                fontSize="26.758"
                fontFamily="Webdings"
                letterSpacing={0}
                wordSpacing={0}
                strokeWidth=".794"
            />
        </g>
    </svg>
);

export const SERIAL_WRITE_ICON = (
    <svg viewBox="0 0 68.792 34.396">
        <g stroke="currentColor">
            <g fill="none" strokeWidth="1.5">
                <g
                    transform="translate(-28.386 -163.072)"
                    strokeLinecap="round"
                    paintOrder="fill markers stroke"
                >
                    <circle cx="43.765" cy="180.27" r="7.955" />
                    <circle cx="67.686" cy="180.27" r="7.955" />
                </g>
                <path d="M3.289 8.334v17.727M27.34 8.334v17.727M51.575 8.334v17.727" />
            </g>
            <path
                d="m65.751 279.802-8.361 8.362V271.44z"
                transform="translate(0 -262.604)"
                style={{
                    lineHeight: "129.99999523%",
                    fontVariantLigatures: "normal",
                    fontVariantCaps: "normal",
                    fontVariantNumeric: "normal",
                    fontFeatureSettings: "normal",
                    textAlign: "start"
                }}
                fontWeight={400}
                fontSize="26.758"
                fontFamily="Webdings"
                letterSpacing={0}
                wordSpacing={0}
                strokeWidth=".794"
            />
        </g>
    </svg>
);

export const MODBUS_ICON = (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202 192" version="1.1">
        <g id="g1154" transform="translate(-21.7 -225.45)">
            <path
                id="path4"
                d="M189.4 323.1c0-36.5-31-66.1-69.3-66.1s-69.3 29.6-69.3 66.1c0 36.5 31 66.1 69.3 66.1 38.3-.1 69.3-29.6 69.3-66.1"
                fill="#f49500"
            />
            <path
                id="path6"
                d="M127.3 251.6c0 14.2-11.5 25.8-25.8 25.8-14.2 0-25.8-11.5-25.8-25.8 0-14.2 11.5-25.8 25.8-25.8 14.2 0 25.8 11.6 25.8 25.8"
                fill="#fcc000"
            />
            <path
                id="path8"
                d="M198.9 273.5c0 14.2-11.5 25.8-25.8 25.8-14.2 0-25.8-11.5-25.8-25.8 0-14.2 11.5-25.8 25.8-25.8s25.8 11.6 25.8 25.8"
                fill="#fcc000"
            />
            <path
                id="path10"
                d="M223.5 341.5c0 14.2-11.5 25.8-25.8 25.8-14.2 0-25.8-11.5-25.8-25.8 0-14.2 11.5-25.8 25.8-25.8 14.3.1 25.8 11.6 25.8 25.8"
                fill="#fcc000"
            />
            <path
                id="path12"
                d="M168.9 391.3c0 14.2-11.5 25.8-25.8 25.8-14.2 0-25.8-11.5-25.8-25.8 0-14.2 11.5-25.8 25.8-25.8 14.2 0 25.8 11.5 25.8 25.8"
                fill="#fcc000"
            />
            <path
                id="path14"
                d="M94.3 373.4c0 14.2-11.5 25.8-25.8 25.8-14.2 0-25.8-11.5-25.8-25.8 0-14.2 11.5-25.8 25.8-25.8 14.2 0 25.8 11.6 25.8 25.8"
                fill="#fcc000"
            />
            <path
                id="path16"
                d="M73.5 303.1c0 14.2-11.5 25.8-25.8 25.8-14.2 0-25.8-11.5-25.8-25.8 0-14.2 11.5-25.8 25.8-25.8 14.2 0 25.8 11.6 25.8 25.8"
                fill="#fcc000"
            />
            <path
                id="polygon18"
                d="m100.5 252-5.6 10 1.9 6.3 3.8-7.4 14.4 49.4-7.4-4.3 1.9 6.6 10.1 5.4 5.7-10-1.9-6.6-4 7.6-14.3-49.4 7.2 4.2-1.8-6.3z"
                fill="#03a239"
            />
            <path
                id="polygon20"
                d="m171.7 277.3-10.8-1-4.2 4 7.8.5-33.6 31.2.1-8.1-4.5 4.2.3 10.9 10.9 1.1 4.4-4.1-8-.6 33.6-31.1v7.8l4.2-3.9z"
                fill="#03a239"
            />
            <path
                id="polygon22"
                d="m116.2 328.2-11.1-.5-4.2 4.2 7.9.2-33.7 33.3-.1-8.2-4.5 4.4.5 11.1 11.1.7 4.5-4.5-8.2-.2 33.7-33.2.1 8 4.3-4.2z"
                fill="#03a239"
            />
            <path
                id="polygon24"
                d="m49.3 302.5 5.3 10.1 6.1 1.9-3.9-7.2 48.2 14.8-7.5 3.8 6.4 2 10-5.5-5.2-10.2-6.4-2 4.1 7.4-48.3-14.8 7.3-3.8-6.1-1.9z"
                fill="#03a239"
            />
            <path
                id="polygon26"
                d="m122.6 329.3-5.3 9.5 1.9 5.6 3.7-6.9 14.8 44.2-7.4-3.5 2 5.9 10.1 4.4 5.5-9.6-2-5.9-3.8 7.2-14.7-44.2 7.2 3.3-1.9-5.6z"
                fill="#03a239"
            />
            <path
                id="polygon28"
                d="m128.3 325.2 4.9 9.8 5.6 1.7-3.6-7.1 44.8 12.9-7 4.1 6 1.8 9.3-5.9-4.7-9.9-6-1.8 3.7 7.3-44.8-13 6.8-4-5.6-1.6z"
                fill="#03a239"
            />
        </g>
    </svg>
);

export const TCP_CONNECT_ICON = (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path
            d="M4 1c-1.11 0-2 .89-2 2v4c0 1.11.89 2 2 2H1v2h12V9h-3c1.11 0 2-.89 2-2V3c0-1.11-.89-2-2-2H4m0 2h6v4H4V3"
            fill="blue"
        />
        <path d="M3 13v7h7v-2H5v-5H3" />
        <path d="M14 13c-1.11 0-2 .89-2 2v4c0 1.11.89 2 2 2h-3v2h12v-2h-3c1.11 0 2-.89 2-2v-4c0-1.11-.89-2-2-2h-6m0 2h6v4h-6v-4Z" />
    </svg>
);

export const TCP_LISTEN_ICON = (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M4 1c-1.11 0-2 .89-2 2v4c0 1.11.89 2 2 2H1v2h12V9h-3c1.11 0 2-.89 2-2V3c0-1.11-.89-2-2-2H4m0 2h6v4H4V3" />
        <path d="M3 13v7h7v-2H5v-5H3" />
        <path
            d="M14 13c-1.11 0-2 .89-2 2v4c0 1.11.89 2 2 2h-3v2h12v-2h-3c1.11 0 2-.89 2-2v-4c0-1.11-.89-2-2-2h-6m0 2h6v4h-6v-4Z"
            fill="blue"
        />
    </svg>
);

export const TCP_EVENT_ICON = (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M4 1c-1.11 0-2 .89-2 2v4c0 1.11.89 2 2 2H1v2h12V9h-3c1.11 0 2-.89 2-2V3c0-1.11-.89-2-2-2H4m0 2h6v4H4V3M3 13v7h7v-2H5v-5H3m11 0c-1.11 0-2 .89-2 2v4c0 1.11.89 2 2 2h-3v2h12v-2h-3c1.11 0 2-.89 2-2v-4c0-1.11-.89-2-2-2h-6m0 2h6v4h-6v-4Z" />
    </svg>
);

export const TCP_WRITE_ICON = (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M4 1c-1.11 0-2 .89-2 2v4c0 1.11.89 2 2 2H1v2h12V9h-3c1.11 0 2-.89 2-2V3c0-1.11-.89-2-2-2H4m0 2h6v4H4V3" />
        <path d="M3 13v7h7v-2H5v-5H3" fill="blue" />
        <path d="M14 13c-1.11 0-2 .89-2 2v4c0 1.11.89 2 2 2h-3v2h12v-2h-3c1.11 0 2-.89 2-2v-4c0-1.11-.89-2-2-2h-6m0 2h6v4h-6v-4Z" />
    </svg>
);

export const TCP_DISCONNECT_ICON = (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M4 1c-1.11 0-2 .89-2 2v4c0 1.11.89 2 2 2H1v2h12V9h-3c1.11 0 2-.89 2-2V3c0-1.11-.89-2-2-2H4m0 2h6v4H4V3M3 13v7h7v-2H5v-5H3m11 0c-1.11 0-2 .89-2 2v4c0 1.11.89 2 2 2h-3v2h12v-2h-3c1.11 0 2-.89 2-2v-4c0-1.11-.89-2-2-2h-6m0 2h6v4h-6v-4Z" />
        <path d="M 14 2 L 22 10" stroke="red" strokeWidth={2} />
        <path d="M 22 2 L 14 10" stroke="red" strokeWidth={2} />
    </svg>
);

export const UDP_IN_ICON = (
    <svg viewBox="0 0 16 16" fill="currentcolor">
        <path
            fillRule="evenodd"
            d="M6.25 0C5.56 0 5 .56 5 1.25v3.5C5 5.44 5.56 6 6.25 6H7v1H1a.75.75 0 0 0 0 1.5h2.5V10H2.25C1.56 10 1 10.56 1 11.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C6.44 16 7 15.44 7 14.75v-3.5C7 10.56 6.44 10 5.75 10H5V8.5h6V10h-.75C9.56 10 9 10.56 9 11.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25H12.5V8.5H15A.75.75 0 0 0 15 7H8.5V6h1.25C10.44 6 11 5.44 11 4.75v-3.5C11 .56 10.44 0 9.75 0zm4.25 11.5v3h3v-3zm-8 0v3h3v-3zm7-7v-3h-3v3z"
            clipRule="evenodd"
        />
    </svg>
);

export const UDP_OUT_ICON = (
    <svg viewBox="0 0 16 16" fill="currentcolor">
        <path
            fillRule="evenodd"
            d="M6.25 0C5.56 0 5 .56 5 1.25v3.5C5 5.44 5.56 6 6.25 6H7v1H1a.75.75 0 0 0 0 1.5h2.5V10H2.25C1.56 10 1 10.56 1 11.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C6.44 16 7 15.44 7 14.75v-3.5C7 10.56 6.44 10 5.75 10H5V8.5h6V10h-.75C9.56 10 9 10.56 9 11.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25H12.5V8.5H15A.75.75 0 0 0 15 7H8.5V6h1.25C10.44 6 11 5.44 11 4.75v-3.5C11 .56 10.44 0 9.75 0zm4.25 11.5v3h3v-3zm-8 0v3h3v-3zm7-7v-3h-3v3z"
            clipRule="evenodd"
        />
    </svg>
);

export const CLIPBOARD_WRITE_ICON = (
    <svg viewBox="0 0 24 24">
        <path d="M1.226 24h16.548C18.45 24 19 23.45 19 22.774V17.5a.5.5 0 0 0-1 0v5.274a.227.227 0 0 1-.226.226H1.226A.227.227 0 0 1 1 22.774V2.226C1 2.102 1.102 2 1.226 2h1.866c.207.581.757 1 1.408 1h10c.651 0 1.201-.419 1.408-1h1.866c.124 0 .226.102.226.226v3.839a.5.5 0 0 0 1 0V2.226C19 1.55 18.45 1 17.774 1h-1.866c-.207-.581-.757-1-1.408-1h-10c-.651 0-1.201.419-1.408 1H1.226C.55 1 0 1.55 0 2.226v20.549C0 23.45.55 24 1.226 24zM4.5 1h10a.5.5 0 0 1 0 1h-10a.5.5 0 0 1 0-1z" />
        <path d="M15 7.5a.5.5 0 0 0-.5-.5h-10a.5.5 0 0 0 0 1h10a.5.5 0 0 0 .5-.5zM12.286 12.5a.5.5 0 0 0-.5-.5H4.5a.5.5 0 0 0 0 1h7.286a.5.5 0 0 0 .5-.5zM4.5 17a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM13.5 17.5a.507.507 0 0 0 .133-.018l2.318-.639a.496.496 0 0 0 .221-.129l7.334-7.335a1.69 1.69 0 0 0 0-2.386c-.637-.637-1.749-.637-2.386 0l-7.334 7.335a.503.503 0 0 0-.128.221l-.639 2.317a.5.5 0 0 0 .481.634zm1.086-2.558 7.241-7.241c.26-.26.712-.26.972 0a.688.688 0 0 1 0 .972l-7.241 7.241-1.341.37.369-1.342z" />
    </svg>
);

export const TERMINAL_WIDGET_ICON = (
    <svg
        viewBox="0 0 24 24"
        strokeWidth="2"
        stroke="currentColor"
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
    >
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M8 9l3 3l-3 3"></path>
        <line x1="13" y1="15" x2="16" y2="15"></line>
        <rect x="3" y="4" width="18" height="16" rx="2"></rect>
    </svg>
);

export const EMBEDDED_DASHBOARD_WIDGET_ICON = (
    <svg viewBox="0 0 560 510">
        <g>
            <path
                d="M509.09 0A50.91 50.91 0 0 1 560 50.91v305.454a50.91 50.91 0 0 1-50.91 50.909H330.91v50.909h50.908v50.909H178.182v-50.91h50.909v-50.908H50.909C22.655 407.273 0 384.363 0 356.363V50.91A50.733 50.733 0 0 1 50.91 0h458.18"
                strokeWidth="25.4545"
                fill="#aaaaaa"
                fillOpacity="1"
            />
            <path
                d="M527.5 368.937h-495v-334h495z"
                fill="#fefefe"
                fillOpacity="1"
                strokeWidth="1.23022"
            />
            <path
                d="M54.633 102.161h70v70h-70zM54.592 192.49h70v70h-70zM54.93 281.458h70v70h-70z"
                fill="#555555"
                fillOpacity="1"
                strokeWidth="24.7486"
            />
            <path
                d="M32.5 34.937h495v46h-495v-46"
                fill="#dddddd"
                fillOpacity="1"
                strokeWidth="22.4944"
            />
            <circle
                cx={240.475}
                cy={182.325}
                r={68.5}
                fill="#555555"
                fillOpacity="1"
                stroke="#000"
                strokeWidth="0"
                strokeLinecap="square"
                strokeOpacity="1"
                paintOrder="fill markers stroke"
            />
            <circle
                cx={414.7}
                cy={182.325}
                r={68.5}
                fill="#555555"
                fillOpacity="1"
                stroke="#000"
                strokeWidth="0"
                strokeLinecap="square"
                strokeOpacity="1"
                paintOrder="fill markers stroke"
            />
        </g>
    </svg>
);

export const PLOTTER_ICON = (
    <svg viewBox="0 0 1024 1024">
        <path d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM305.8 637.7c3.1 3.1 8.1 3.1 11.3 0l138.3-137.6L583 628.5c3.1 3.1 8.2 3.1 11.3 0l275.4-275.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6a8.03 8.03 0 0 0-11.3 0l-230 229.9L461.4 404a8.03 8.03 0 0 0-11.3 0L266.3 586.7a8.03 8.03 0 0 0 0 11.3l39.5 39.7z" />
    </svg>
);

export const CONVERT_TO_CHART = (
    <svg viewBox="0 0 1024 1024">
        <path d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8M305.8 637.7c3.1 3.1 8.1 3.1 11.3 0l138.3-137.6L583 628.5c3.1 3.1 8.2 3.1 11.3 0l275.4-275.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6a8.03 8.03 0 0 0-11.3 0l-230 229.9L461.4 404a8.03 8.03 0 0 0-11.3 0L266.3 586.7a8.03 8.03 0 0 0 0 11.3z" />
        <g transform="scale(12 12) translate(40 0)">
            <g>
                <rect x="5" y="5" width="38" height="38" fill="white" />
            </g>
            <g fill="green">
                <path d="M34,22H26V14a2,2,0,0,0-4,0v8H14a2,2,0,0,0,0,4h8v8a2,2,0,0,0,4,0V26h8a2,2,0,0,0,0-4Z" />
                <path d="M40,8V40H8V8H40m2-4H6A2,2,0,0,0,4,6V42a2,2,0,0,0,2,2H42a2,2,0,0,0,2-2V6a2,2,0,0,0-2-2Z" />
            </g>
        </g>
    </svg>
);

export const COLLECT_STREAM_ICON: any = (
    <svg viewBox="0 0 1000 1000" fill="currentColor">
        <path d="M612.87 152.38c-12.07 13.03-49.63 80.67-62.09 111.72-6.71 16.48-7.28 19.93-7.47 36.41 0 17.44.38 19.16 7.09 32.77 16.48 33.34 52.31 53.46 84.51 47.52 26.83-4.79 49.82-22.23 62.09-47.33 6.71-13.22 7.28-15.71 7.28-30.85 0-20.89-4.79-35.83-22.04-69.94-16.67-32.96-43.12-76.84-49.25-81.63-6.89-5.38-14.17-4.81-20.12 1.33zm23 58.44c15.52 26.64 29.9 55.96 35.07 70.71 9.39 27.98-1.92 55.96-26.83 66.3-9 3.83-31.81 3.83-40.62.19-16.86-7.28-28.36-23.19-29.89-41.78-1.34-13.41 2.49-26.83 13.8-50.59 8.05-16.67 35.07-64.39 36.41-64.39.37.02 5.74 8.83 12.06 19.56zM370.08 343.05c-5.75 3.07-31.24 44.07-49.82 80.1-16.29 31.43-25.1 56.72-25.1 71.48 0 42.35 39.28 81.83 81.44 81.83s81.44-39.47 81.44-81.83c0-23.38-19.74-67.45-58.06-129.54-6.32-10.16-12.46-19.55-13.61-20.31-4.03-3.27-11.69-4.03-16.29-1.73zm18.4 61.89c24.14 40.63 38.9 74.93 38.9 90.83 0 21.84-13.61 41.39-32.77 46.95-38.52 11.5-71.48-13.22-68.22-51.36 1.34-17.05 20.7-58.83 45.03-97.73 5.37-8.81 4.98-9 17.06 11.31z" />
        <path d="M18.06 578.75c-8.24 3.83-10.73 15.52-4.79 22.8 3.64 4.6 4.6 4.6 43.5 5.56l39.86.96 77.23 119.77c42.54 65.92 78.76 120.92 80.48 122.07 4.79 3.64 486.93 3.64 491.72 0 1.73-1.15 37.94-56.15 80.48-122.07l77.23-119.77 39.48-.96c27.98-.77 40.05-1.72 42.35-3.45 7.28-6.13 5.17-21.08-3.64-25.1-7.67-3.45-88.92-2.88-93.9.57-2.11 1.53-38.71 56.72-81.25 122.64l-77.42 119.96H270.82l-77.23-119.96c-42.73-65.92-79.14-121.11-81.25-122.64-3.07-2.11-13.03-2.68-47.14-2.49-25.49 0-44.84.96-47.14 2.11z" />
    </svg>
);

export const CLOSE_STREAM_ICON: any = (
    <svg viewBox="0 1 18 19">
        <path
            d="M7.5 9.25a5.75 5.75 0 0 1 5.75-5.75h.5a.75.75 0 0 0 0-1.5h-.5A7.25 7.25 0 0 0 6 9.25v1a.75.75 0 0 1-.75.75H4.9l1.294 1.293A2.25 2.25 0 0 0 7.5 10.25zm-1.097 7.248-1.23 1.23A.75.75 0 0 0 5.75 18h.5a7.25 7.25 0 0 0 7.25-7.25v-1a.75.75 0 0 1 .75-.75h3a.75.75 0 0 0 0-1.5h-3A2.25 2.25 0 0 0 12 9.75v1a5.75 5.75 0 0 1-5.597 5.748m.788-3.084a2.22 2.22 0 0 1 .24 1.53A4.75 4.75 0 0 0 10.5 10.5v-1a3.25 3.25 0 0 1 3.25-3.25h3.5a.75.75 0 0 0 0-1.5h-3.5A4.75 4.75 0 0 0 9 9.5v1a3.25 3.25 0 0 1-1.809 2.914"
            fill="currentcolor"
        />
        <path
            d="M1 10 8 17 M8 10 1 17"
            stroke="red"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="1.5"
        />
    </svg>
);

export const HOME_TAB_OPEN_ICON = (
    <svg fill="currentColor" viewBox="0 0 256 256">
        <path d="M245 110.64a16 16 0 0 0-13-6.64h-16V88a16 16 0 0 0-16-16h-69.33l-27.73-20.8a16.14 16.14 0 0 0-9.6-3.2H40a16 16 0 0 0-16 16v144a8 8 0 0 0 8 8h179.1a8 8 0 0 0 7.59-5.47l28.49-85.47a16.05 16.05 0 0 0-2.18-14.42ZM93.34 64l27.73 20.8a16.12 16.12 0 0 0 9.6 3.2H200v16H69.77a16 16 0 0 0-15.18 10.94L40 158.7V64Z" />
    </svg>
);

export const SHOW_FILE_IN_FOLDER_ICON: any = (
    <svg viewBox="0 0 32 32" fill="currentColor">
        <path d="M6 3v26h10.813l2-2H8V5h10v6h6v5.406c.6-.2 1.3-.406 2-.406V9.594L19.406 3H6zm14 3.406L22.594 9H20V6.406zM26.5 18c-3.026 0-5.5 2.474-5.5 5.5 0 1.159.35 2.236.969 3.125l-3.688 3.656 1.438 1.438 3.656-3.688c.89.618 1.966.969 3.125.969 3.026 0 5.5-2.474 5.5-5.5S29.526 18 26.5 18zm0 2c1.945 0 3.5 1.555 3.5 3.5S28.445 27 26.5 27a3.485 3.485 0 0 1-3.5-3.5c0-1.945 1.555-3.5 3.5-3.5z" />
    </svg>
);

export const PROJECT_EDITOR_SCRAPBOOK: any = (
    <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="m19 23.3-.6-.5c-2-1.9-3.4-3.1-3.4-4.6 0-1.2 1-2.2 2.2-2.2.7 0 1.4.3 1.8.8.4-.5 1.1-.8 1.8-.8 1.2 0 2.2.9 2.2 2.2 0 1.5-1.4 2.7-3.4 4.6zM17 4v6l-2-2-2 2V4H9v16h4.08c.12.72.37 1.39.72 2H7c-1.05 0-2-.95-2-2v-1H3v-2h2v-4H3v-2h2V7H3V5h2V4a2 2 0 0 1 2-2h12c1.05 0 2 .95 2 2v9.34c-.63-.22-1.3-.34-2-.34V4zM5 19h2v-2H5zm0-6h2v-2H5zm0-6h2V5H5z" />
    </svg>
);

export const RECORD_AUDIO_ICON: any = (
    <svg viewBox="-1 -1 18 18">
        <path d="M8 10v0c-1.7 0-3-1.3-3-3v-4c0-1.6 1.3-3 3-3v0c1.6 0 3 1.3 3 3v4c0 1.6-1.4 3-3 3z" />
        <path d="M12 5v2.5c0 1.9-1.8 3.5-3.8 3.5h-0.4c-2 0-3.8-1.6-3.8-3.5v-2.5c-0.6 0-1 0.4-1 1v1.5c0 2.2 1.8 4.1 4 4.4v2.1c-3 0-2.5 2-2.5 2h7c0 0 0.5-2-2.5-2v-2.1c2.2-0.4 4-2.2 4-4.4v-1.5c0-0.6-0.4-1-1-1z" />
    </svg>
);

export const RECORD_VIDEO_ICON: any = (
    <svg viewBox="-2 -4 32 32">
        <path d="m13.846 9.692c2.293.004 4.15 1.862 4.154 4.154v.004c0 2.294-1.86 4.154-4.154 4.154s-4.154-1.86-4.154-4.154c0-1.148.466-2.187 1.218-2.939.728-.753 1.747-1.22 2.876-1.22h.063-.003zm10.154-6h.055c1.002 0 1.908.414 2.554 1.081l.001.001c.668.647 1.082 1.553 1.082 2.555v.058-.003 12.924c-.001 2.039-1.653 3.691-3.692 3.692h-20.308c-2.039-.001-3.691-1.653-3.692-3.692v-12.923c0-.016 0-.036 0-.055 0-1.002.414-1.908 1.081-2.554l.001-.001c.647-.668 1.553-1.082 2.555-1.082h.058-.003 3.23l.735-1.962c.212-.507.557-.922.993-1.213l.01-.006c.411-.311.929-.501 1.49-.512h.002 7.385c.564.011 1.081.201 1.499.517l-.006-.005c.445.297.791.712.996 1.201l.007.018.735 1.962zm-10.154 16.616c.027 0 .059.001.091.001 1.755 0 3.341-.727 4.472-1.896l.002-.002c1.171-1.133 1.897-2.719 1.897-4.474 0-.032 0-.064-.001-.096v.005c0-.027.001-.06.001-.092 0-1.755-.727-3.341-1.896-4.472l-.002-.002c-1.167-1.172-2.781-1.897-4.565-1.897s-3.398.725-4.565 1.896c-1.171 1.133-1.897 2.719-1.897 4.474 0 .032 0 .064.001.096v-.005c0 .028-.001.061-.001.094 0 1.755.726 3.34 1.894 4.471l.002.002c1.133 1.171 2.719 1.897 4.474 1.897.033 0 .065 0 .097-.001h-.005z" />
    </svg>
);

export const CALL_ACTION_ICON: any = (
    <svg
        viewBox="0 0 24 24"
        strokeWidth="2"
        stroke="currentColor"
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
    >
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M7 4a12.25 12.25 0 0 0 0 16"></path>
        <path d="M17 4a12.25 12.25 0 0 1 0 16"></path>
    </svg>
);

export const CALL_NATIVE_ACTION_ICON: any = (
    <svg viewBox="0 0 24 24" fill="currentColor">
        <path fill="none" d="M0 0h24v24H0z" />
        <path d="M4 18v-3.7a1.5 1.5 0 0 0-1.5-1.5H2v-1.6h.5A1.5 1.5 0 0 0 4 9.7V6a3 3 0 0 1 3-3h1v2H7a1 1 0 0 0-1 1v4.1A2 2 0 0 1 4.626 12 2 2 0 0 1 6 13.9V18a1 1 0 0 0 1 1h1v2H7a3 3 0 0 1-3-3m16-3.7V18a3 3 0 0 1-3 3h-1v-2h1a1 1 0 0 0 1-1v-4.1a2 2 0 0 1 1.374-1.9A2 2 0 0 1 18 10.1V6a1 1 0 0 0-1-1h-1V3h1a3 3 0 0 1 3 3v3.7a1.5 1.5 0 0 0 1.5 1.5h.5v1.6h-.5a1.5 1.5 0 0 0-1.5 1.5" />
    </svg>
);

export const FOCUS_WIDGET_ICON: any = (
    <svg viewBox="0 0 24 24">
        <path
            fill="currentColor"
            d="M5 21q-.825 0-1.412-.587T3 19v-4h2v4h4v2zm10 0v-2h4v-4h2v4q0 .825-.587 1.413T19 21zM3 9V5q0-.825.588-1.412T5 3h4v2H5v4zm16 0V5h-4V3h4q.825 0 1.413.588T21 5v4zm-7 8q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17"
        />
    </svg>
);

export const PLAY_AUDIO_ICON = (
    <svg fill="currentcolor" viewBox="-100 -100 2120 2120">
        <path
            d="M1129.432 113v1694.148H903.545l-451.772-451.773V564.773L903.545 113h225.887Zm542.545 248.057C1832.017 521.097 1920 733.882 1920 960.107c0 226.226-87.983 438.898-248.023 598.938l-79.851-79.85c138.694-138.582 214.93-323.018 214.93-519.087 0-196.183-76.236-380.506-214.93-519.2ZM338.83 564.773v790.602H169.415C75.672 1355.375 0 1279.703 0 1185.96V734.187c0-93.742 75.672-169.414 169.415-169.414H338.83Zm1093.922 36.085c95.776 97.018 148.407 224.644 148.407 359.16 0 134.628-52.631 262.253-148.407 359.272l-80.303-79.174c74.656-75.897 115.767-175.4 115.767-280.099 0-104.585-41.111-204.088-115.767-279.986Z"
            fillRule="evenodd"
        />
    </svg>
);

export const QR_CODE_ICON = (
    <svg viewBox="0 0 16 16">
        <path fill="currentColor" d="M6 0H0v6h6V0zM5 5H1V1h4v4z" />
        <path
            fill="currentColor"
            d="M2 2h2v2H2V2zM0 16h6v-6H0v6zm1-5h4v4H1v-4z"
        />
        <path
            fill="currentColor"
            d="M2 12h2v2H2v-2zm8-12v6h6V0h-6zm5 5h-4V1h4v4z"
        />
        <path
            fill="currentColor"
            d="M12 2h2v2h-2V2zM2 7H0v2h3V8H2zm5 2h2v2H7V9zM3 7h2v1H3V7zm6 5H7v1h1v1h1v-1zM6 7v1H5v1h2V7zm2-3h1v2H8V4zm1 4v1h2V7H8v1zM7 6h1v1H7V6zm2 8h2v2H9v-2zm-2 0h1v2H7v-2zm2-3h1v1H9v-1zm0-8V1H8V0H7v4h1V3zm3 11h1v2h-1v-2zm0-2h2v1h-2v-1zm-1 1h1v1h-1v-1zm-1-1h1v1h-1v-1zm4-2v1h1v1h1v-2h-1zm1 3h-1v3h2v-2h-1zm-5-3v1h3V9h-2v1zm2-3v1h2v1h2V7h-2z"
        />
    </svg>
);

export const PERCENT_ICON = (
    <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            d="M12 3L4 13"
            stroke="currentColor"
            strokeWidth="1.2"
            strokeLinecap="round"
        />
        <circle cx="5" cy="5" r="2.5" stroke="currentColor" strokeWidth="1.2" />
        <circle
            cx="11"
            cy="11"
            r="2.5"
            stroke="currentColor"
            strokeWidth="1.1"
        />
    </svg>
);

export const PX_ICON = (
    <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            d="M2.5 14V3H5.5C7 3 8 4 8 5.5V5.5C8 7 7 8 5.5 8H2.5"
            stroke="currentColor"
            strokeWidth="1.1"
            strokeLinecap="round"
            strokeLinejoin="round"
        />
        <path
            d="M9 8.5L13.5 14M13.5 8.5L9 14"
            stroke="currentColor"
            strokeWidth="1.1"
            strokeLinecap="round"
        />
    </svg>
);

export const FIT_WIDTH_TO_CONTENT_ICON = (
    <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            d="M0 8H4.5M0 8L2.5 5.5M0 8L2.5 10.5"
            stroke="currentColor"
            strokeWidth="1.1"
            strokeLinecap="round"
            strokeLinejoin="round"
        />
        <path
            d="M16 8H11.5M16 8L13.5 5.5M16 8L13.5 10.5"
            stroke="currentColor"
            strokeWidth="1.1"
            strokeLinecap="round"
            strokeLinejoin="round"
        />
        <rect
            x="5.5"
            y="2"
            width="5"
            height="12"
            rx="0.5"
            stroke="currentColor"
            strokeWidth="1.1"
        />
    </svg>
);

export const FIT_HEIGHT_TO_CONTENT_ICON = (
    <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            d="M8 0V4.5M8 0L5.5 2.5M8 0L10.5 2.5"
            stroke="currentColor"
            strokeWidth="1.1"
            strokeLinecap="round"
            strokeLinejoin="round"
        />
        <path
            d="M8 16V11.5M8 16L5.5 13.5M8 16L10.5 13.5"
            stroke="currentColor"
            strokeWidth="1.1"
            strokeLinecap="round"
            strokeLinejoin="round"
        />
        <rect
            x="2"
            y="5.5"
            width="12"
            height="5"
            rx="0.5"
            stroke="currentColor"
            strokeWidth="1.1"
        />
    </svg>
);

export const EXPRESSION_ICON = (
    <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            d="M5 0.5C5 0.5 3 0.5 3 3L3 6C3 6.5 2 7.5 1 8C2 8.5 3 9.5 3 10L3 13C3 15.5 5 15.5 5 15.5"
            stroke="currentColor"
            strokeWidth="1"
            strokeLinecap="round"
            strokeLinejoin="round"
            fill="none"
        />
        <path
            d="M11 0.5C11 0.5 13 0.5 13 3L13 6C13 6.5 14 7.5 15 8C14 8.5 13 9.5 13 10L13 13C13 15.5 11 15.5 11 15.5"
            stroke="currentColor"
            strokeWidth="1"
            strokeLinecap="round"
            strokeLinejoin="round"
            fill="none"
        />
        <circle cx="8" cy="8" r="1.2" fill="currentColor" />
    </svg>
);

export const ASSIGNABLE_ICON = (
    <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            d="M5 0.5C5 0.5 3 0.5 3 3L3 6C3 6.5 2 7.5 1 8C2 8.5 3 9.5 3 10L3 13C3 15.5 5 15.5 5 15.5"
            stroke="currentColor"
            strokeWidth="1"
            strokeLinecap="round"
            strokeLinejoin="round"
            fill="none"
        />
        <path
            d="M11 0.5C11 0.5 13 0.5 13 3L13 6C13 6.5 14 7.5 15 8C14 8.5 13 9.5 13 10L13 13C13 15.5 11 15.5 11 15.5"
            stroke="currentColor"
            strokeWidth="1"
            strokeLinecap="round"
            strokeLinejoin="round"
            fill="none"
        />
        <path
            d="M8.5 5L5.5 8L8.5 11M5.5 8H11"
            stroke="currentColor"
            strokeWidth="1"
            strokeLinecap="round"
            strokeLinejoin="round"
            fill="none"
        />
    </svg>
);

export const LITERAL_STRING_ICON = (
    <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            d="M0.5 9L3.5 1.5L6.5 9M1.5 7H5.5"
            stroke="currentColor"
            strokeWidth="1.1"
            strokeLinecap="round"
            strokeLinejoin="round"
        />
        <path
            d="M10 8L15 8L10 14L15 14"
            stroke="currentColor"
            strokeWidth="1.1"
            strokeLinecap="round"
            strokeLinejoin="round"
        />
    </svg>
);

export const TRANSLATED_LITERAL_ICON = (
    <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <circle cx="8" cy="8" r="7.4" stroke="currentColor" strokeWidth="1.2" />
        <path d="M0.6 5.5H15.4" stroke="currentColor" strokeWidth="0.8" />
        <path d="M0.6 10.5H15.4" stroke="currentColor" strokeWidth="0.8" />
        <ellipse
            cx="8"
            cy="8"
            rx="3"
            ry="7.4"
            stroke="currentColor"
            strokeWidth="0.8"
        />
    </svg>
);

export const LITERAL_NUMBER_ICON = (
    <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            d="M6.5 2L5 14M11 2L9.5 14"
            stroke="currentColor"
            strokeWidth="1.1"
            strokeLinecap="round"
        />
        <path
            d="M2 6H13.5M2.5 10.5H14"
            stroke="currentColor"
            strokeWidth="1.1"
            strokeLinecap="round"
        />
    </svg>
);

export const LITERAL_BOOLEAN_ICON = (
    <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <rect
            x="0.6"
            y="3"
            width="14.8"
            height="10"
            rx="5"
            stroke="currentColor"
            strokeWidth="1.2"
        />
        <circle cx="10.4" cy="8" r="3.2" fill="currentColor" />
    </svg>
);

export const LITERAL_COLOR_ICON = (
    <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <circle
            cx="5"
            cy="5"
            r="4.4"
            stroke="currentColor"
            strokeWidth="1.1"
            fill="none"
            opacity="0.7"
        />
        <circle
            cx="11"
            cy="5"
            r="4.4"
            stroke="currentColor"
            strokeWidth="1.1"
            fill="none"
            opacity="0.7"
        />
        <circle
            cx="8"
            cy="10.5"
            r="4.4"
            stroke="currentColor"
            strokeWidth="1.1"
            fill="none"
            opacity="0.7"
        />
    </svg>
);

export const LITERAL_ENUM_ICON = (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        width={24}
        height={25}
        viewBox="0 0 24 24"
    >
        <path
            fill="currentColor" 
            d="M17 5h3l-1.5 2zM3 2h18a2 2 0 0 1 2 2v4c0 1.11-.89 2-2 2h-5v10c0 1.11-.89 2-2 2H3a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2m0 2v4h11V4zm18 4V4h-5v4zM3 20h11V10H3zm2-8h7v2H5zm0 4h7v2H5z"
        />
    </svg>
);