import React from 'react';

import { css, cx } from '@leafygreen-ui/emotion';
import { HTMLElementProps } from '@leafygreen-ui/lib';

type ProductIconProps = HTMLElementProps<'svg'> & {
  active?: boolean;
  size?: number;
};

export function CloudManagerIcon({
  size = 18,
  active = false,
  className,
  ...rest
}: ProductIconProps) {
  return (
    <svg
      {...rest}
      width={`${size}px`}
      height={`${size}px`}
      viewBox={`0 0 18 18`}
      className={cx(
        css`
          flex-shrink: 0;
        `,
        className,
      )}
    >
      <defs>
        <linearGradient
          id="cloud-manager-linear-gradient"
          x1="0.96"
          y1="15.06"
          x2="15.02"
          y2="14.8"
          gradientUnits="userSpaceOnUse"
        >
          <stop offset="0" stopColor="#0d6149" />
          <stop offset="0.37" stopColor="#04a74f" />
          <stop offset="0.65" stopColor="#00cd57" />
          <stop offset="0.92" stopColor="#5fd590" />
          <stop offset="1" stopColor="#7ed8a2" />
        </linearGradient>
        <linearGradient
          id="cloud-manager-linear-gradient-2"
          x1="-2.54"
          y1="9"
          x2="13.27"
          y2="9"
          xlinkHref="#cloud-manager-linear-gradient"
        />
        <linearGradient
          id="cloud-manager-linear-gradient-3"
          x1="21.41"
          y1="15.32"
          x2="1.11"
          y2="15.32"
          xlinkHref="#cloud-manager-linear-gradient"
        />
        <linearGradient
          id="cloud-manager-linear-gradient-4"
          x1="19.24"
          y1="9"
          x2="-3.78"
          y2="9"
          xlinkHref="#cloud-manager-linear-gradient"
        />
      </defs>
      <path
        className={css`
          fill: ${size <= 10
            ? '#00804b'
            : active
            ? 'url(#cloud-manager-linear-gradient)'
            : 'currentColor'};
        `}
        d="M5.74,17.39h.73a2.38,2.38,0,0,0,0-4.75H.77A9,9,0,0,0,5.74,17.39Z"
      />
      <path
        className={css`
          fill: ${size <= 10
            ? '#03aa4f'
            : active
            ? 'url(#cloud-manager-linear-gradient-2)'
            : 'currentColor'};
        `}
        d="M2.84,9a3.6,3.6,0,0,1,.9-2.38H.32a9,9,0,0,0,0,4.76H3.73A3.64,3.64,0,0,1,2.84,9Z"
      />
      <path
        className={css`
          fill: ${size <= 10
            ? '#00804b'
            : active
            ? 'url(#cloud-manager-linear-gradient-3)'
            : 'currentColor'};
        `}
        d="M10.1,15a3.63,3.63,0,0,1-1.55,3H9a9,9,0,0,0,8.23-5.36h-8A3.58,3.58,0,0,1,10.1,15Z"
      />
      <path
        className={css`
          fill: ${size <= 10 ? '#007dab' : active ? '#007dab' : 'currentColor'};
        `}
        d="M9,0A9,9,0,0,0,.77,5.36H17.23A9,9,0,0,0,9,0Z"
      />
      <path
        className={css`
          fill: ${size <= 10
            ? '#03aa4f'
            : active
            ? 'url(#cloud-manager-linear-gradient-4)'
            : 'currentColor'};
        `}
        d="M4.1,9a2.39,2.39,0,0,0,2.38,2.38h11.2a9,9,0,0,0,0-4.76H6.48A2.39,2.39,0,0,0,4.1,9Z"
      />
    </svg>
  );
}

export function AtlasIcon({
  size = 18,
  active,
  className,
  ...rest
}: ProductIconProps) {
  return (
    <svg
      {...rest}
      x="0px"
      y="0px"
      viewBox="0 0 18 18"
      width={`${size}px`}
      height={`${size}px`}
      className={cx(
        css`
          flex-shrink: 0;
        `,
        className,
      )}
    >
      <linearGradient
        id="atlas-path-0001"
        gradientUnits="userSpaceOnUse"
        x1="-259.3434"
        y1="361.1949"
        x2="-258.8194"
        y2="362.3814"
        gradientTransform="matrix(8.1429 0 0 -8.8286 2123.7998 3202.6858)"
      >
        <stop offset="0" stopColor="#0D6149" />
        <stop offset="0.3697" stopColor="#03AA4F" />
        <stop offset="0.6496" stopColor="#00D057" />
        <stop offset="0.9118" stopColor="#5FD891" />
        <stop offset="1" stopColor="#80DBA5" />
      </linearGradient>
      <path
        className={css`
          fill: ${size <= 10
            ? '#03aa4f'
            : active
            ? 'url(#atlas-path-0001)'
            : 'currentColor'};
        `}
        d="M12,11c2-1.4,4.2-1.7,6-1.7c0-0.1,0-0.3,0-0.4c0-1.7-0.5-3.3-1.3-4.7c-1.3,0.1-2.6,0.5-4,1.4
		C11,6.8,10.1,8.4,9.6,9.5v3.8C10.2,12.6,11,11.7,12,11z"
      />
      <linearGradient
        id="atlas-path-0002"
        gradientUnits="userSpaceOnUse"
        x1="-258.827"
        y1="361.1505"
        x2="-259.5977"
        y2="362.4457"
        gradientTransform="matrix(8.1429 0 0 -8.8286 2114.457 3202.6858)"
      >
        <stop offset="0" stopColor="#0D6149" />
        <stop offset="0.3697" stopColor="#03AA4F" />
        <stop offset="0.6496" stopColor="#00D057" />
        <stop offset="0.9118" stopColor="#5FD891" />
        <stop offset="1" stopColor="#80DBA5" />
      </linearGradient>
      <path
        className={css`
          fill: ${size <= 10
            ? '#03aa4f'
            : active
            ? 'url(#atlas-path-0002)'
            : 'currentColor'};
        `}
        d="M6,11c1,0.7,1.8,1.5,2.4,2.3V9.5C7.9,8.4,7,6.8,5.3,5.7C4,4.8,2.6,4.4,1.3,4.3
		C0.5,5.6,0,7.2,0,8.9c0,0.1,0,0.3,0,0.4C1.8,9.3,4,9.6,6,11z"
      />
      <linearGradient
        id="atlas-path-0003"
        gradientUnits="userSpaceOnUse"
        x1="-258.8299"
        y1="350.908"
        x2="-257.6751"
        y2="351.788"
        gradientTransform="matrix(7.9714 0 0 -7.1187 2073.0569 2514.6802)"
      >
        <stop offset="0" stopColor="#0D6149" />
        <stop offset="0.3697" stopColor="#03AA4F" />
        <stop offset="0.6496" stopColor="#00D057" />
        <stop offset="0.9118" stopColor="#5FD891" />
        <stop offset="1" stopColor="#80DBA5" />
      </linearGradient>
      <path
        className={css`
          fill: ${size <= 10
            ? '#00804b'
            : active
            ? 'url(#atlas-path-0003)'
            : 'currentColor'};
        `}
        d="M12.7,12.1c-1.7,1.1-2.6,2.7-3.1,3.8V18c4.1-0.3,7.5-3.4,8.2-7.3C16.3,10.6,14.4,10.9,12.7,12.1z
		"
      />
      <linearGradient
        id="atlas-path-4"
        gradientUnits="userSpaceOnUse"
        x1="-257.8067"
        y1="350.8745"
        x2="-259.0576"
        y2="351.7716"
        gradientTransform="matrix(7.9714 0 0 -7.1187 2063.8855 2514.6802)"
      >
        <stop offset="0" stopColor="#0D6149" />
        <stop offset="0.3697" stopColor="#03AA4F" />
        <stop offset="0.6496" stopColor="#00D057" />
        <stop offset="0.9118" stopColor="#5FD891" />
        <stop offset="1" stopColor="#80DBA5" />
      </linearGradient>
      <path
        className={css`
          fill: ${size <= 10
            ? '#00804b'
            : active
            ? 'url(#atlas-path-4)'
            : 'currentColor'};
        `}
        d="M8.4,15.9c-0.5-1.1-1.4-2.7-3.1-3.8c-1.7-1.2-3.6-1.5-5.1-1.4c0.8,4,4.1,7,8.2,7.3V15.9z"
      />
      <path
        className={css`
          fill: ${size <= 10 ? '#80dba5' : active ? '#00804b' : 'currentColor'};
        `}
        d="M6,4.7C7,5.4,7.8,6.2,8.4,7V0C5.9,0.2,3.7,1.3,2.2,3.2C3.4,3.3,4.8,3.8,6,4.7z"
      />
      <path
        className={css`
          fill: ${size <= 10 ? '#80dba5' : active ? '#00804b' : 'currentColor'};
        `}
        d="M15.8,3.2c-1.5-1.8-3.7-3-6.2-3.1v7C10.2,6.2,11,5.4,12,4.7C13.2,3.8,14.6,3.3,15.8,3.2z"
      />
    </svg>
  );
}

export function RealmIcon({ active, ...rest }: ProductIconProps) {
  return (
    <svg
      {...rest}
      x="0px"
      y="0px"
      viewBox="0 0 18 18"
      width="18px"
      height="18px"
    >
      <linearGradient
        id="realm-path-0001"
        gradientUnits="userSpaceOnUse"
        x1="12.4555"
        y1="6.7462"
        x2="13.454"
        y2="13.2264"
        gradientTransform="matrix(1 0 0 -1 0 20)"
      >
        <stop offset="0" stopColor="#AF478B" />
        <stop offset="0.22" stopColor="#C66191" />
        <stop offset="0.53" stopColor="#EC8C9A" />
        <stop offset="0.66" stopColor="#EE99A2" />
        <stop offset="0.88" stopColor="#F3BCB6" />
        <stop offset="1" stopColor="#F6D0C2" />
      </linearGradient>
      <path
        className={css`
          fill: ${active ? 'url(#realm-path-0001)' : 'currentColor'};
        `}
        d="M7.8,11.1l0.8,0.3c1.7,0.7,3.5,1.1,5.3,1c1.3-0.1,2.6-0.5,3.8-1.1C17.9,10.6,18,9.8,18,9V8.7
			C14.4,7.8,10.6,8.7,7.8,11.1z"
      />
      <linearGradient
        id="realm-path-0002"
        gradientUnits="userSpaceOnUse"
        x1="8.7566"
        y1="2.3021"
        x2="8.8565"
        y2="9.5311"
        gradientTransform="matrix(1 0 0 -1 0 20)"
      >
        <stop offset="0" stopColor="#AF478B" />
        <stop offset="0.22" stopColor="#C66191" />
        <stop offset="0.53" stopColor="#EC8C9A" />
        <stop offset="0.66" stopColor="#EE99A2" />
        <stop offset="0.88" stopColor="#F3BCB6" />
        <stop offset="1" stopColor="#F6D0C2" />
      </linearGradient>
      <path
        className={css`
          fill: ${active ? 'url(#realm-path-0002)' : 'currentColor'};
        `}
        d="M17,13c-1,0.4-2,0.6-3.1,0.7c-2,0.1-4-0.3-5.8-1.1c-1.8-0.8-3.8-1.1-5.8-0.9c-0.6,0.1-1.2,0.3-1.7,0.5
			c1.8,4.6,7,6.9,11.6,5.1C14.3,16.6,16,15,17,13z"
      />
      <path
        className={css`
          fill: ${active ? '#6e60f2' : 'currentColor'};
        `}
        d="M4.4,5.3c2.4,0,4.6,1,6.3,2.6c2.3-0.9,4.7-1.1,7.1-0.6c-0.9-4.9-5.6-8.1-10.5-7.2c-3.3,0.6-5.9,3-6.9,6.1
			C1.7,5.7,3,5.3,4.4,5.3z"
      />
      <linearGradient
        id="realm-path-0003"
        gradientUnits="userSpaceOnUse"
        x1="4.1834"
        y1="8.0334"
        x2="5.1919"
        y2="14.5037"
        gradientTransform="matrix(1 0 0 -1 0 20)"
      >
        <stop offset="0" stopColor="#AF478B" />
        <stop offset="0.22" stopColor="#C66191" />
        <stop offset="0.53" stopColor="#EC8C9A" />
        <stop offset="0.66" stopColor="#EE99A2" />
        <stop offset="0.88" stopColor="#F3BCB6" />
        <stop offset="1" stopColor="#F6D0C2" />
      </linearGradient>
      <path
        className={css`
          fill: ${active ? 'url(#realm-path-0003)' : 'currentColor'};
        `}
        d="M0.1,7.9C0,8.3,0,8.6,0,9c0,0.7,0.1,1.3,0.2,2c0.6-0.3,1.2-0.4,1.9-0.6c1.4-0.3,2.9-0.2,4.3,0.2
			c0.9-0.9,1.9-1.6,3-2.1c-1.4-1.2-3.2-1.9-5-1.9C2.9,6.6,1.4,7.1,0.1,7.9z"
      />
    </svg>
  );
}

export function ChartsIcon({ active, ...rest }: ProductIconProps) {
  return (
    <svg
      {...rest}
      x="0px"
      y="0px"
      viewBox="0 0 18 18"
      width="18px"
      height="18px"
    >
      <g>
        <linearGradient
          id="charts-logo-gradient"
          gradientUnits="userSpaceOnUse"
          x1="8.071497"
          y1="3.6046767"
          x2="9.5892"
          y2="11.7870789"
        >
          <stop offset="0.1533896" stopColor="#B9EACD" />
          <stop offset="1" stopColor="#007DAF" />
        </linearGradient>
        <path
          className={css`
            fill: ${active ? 'url(#charts-logo-gradient)' : 'currentColor'};
          `}
          d="M9.7495308,9.9141502c-0.226757-0.0123043-0.437871-0.1191797-0.5820112-0.2946091L6.2850585,6.111299
		l-5.7055078,6.0680566c0.161543,0.4275875,0.3550781,0.83918,0.577002,1.2328854
		c3.2708936-0.0032082,8.2101269,0.0024614,15.6741505,0.022193C17.5736427,12.1252584,18,10.6128807,18,9
		c0-1.9307814-0.6100483-3.7180371-1.6450481-5.1837893l-5.9951077,5.8679295
		C10.197773,9.8429594,9.9750586,9.9268064,9.7495308,9.9141502z"
        />
        <path
          className={css`
            fill: ${active ? '#2F9FC5' : 'currentColor'};
          `}
          d="M5.735918,4.3303709C5.8953514,4.1607423,6.1177149,4.0687208,6.353086,4.075664
		c0.2327342,0.0078225,0.4508786,0.1154003,0.598711,0.2953124l2.9063668,3.537334l5.4454393-5.3298192
		C13.6798239,0.984375,11.4553127,0,9,0C4.0294337,0,0,4.0294337,0,9c0,0.4507914,0.0341016,0.8934965,0.0980859,1.3264456
		L5.735918,4.3303709z"
        />
        <path
          className={css`
            fill: ${active ? '#1A567E' : 'currentColor'};
          `}
          d="M2.3222461,15.0332079C3.9692285,16.8549614,6.3507128,18,9,18
		c2.640234,0,5.014863-1.1368656,6.6612301-2.9478073C11.025176,15.0413818,6.1676807,15.0334721,2.3222461,15.0332079z"
        />
      </g>
    </svg>
  );
}

export function CloudIcon(props: HTMLElementProps<'svg'>) {
  return (
    <svg {...props} width="24px" height="24px" viewBox="0 0 24 24">
      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
        <path
          d="M11.7404807,8.23529929 C11.9346566,8.02930005 12.2642284,8.02930005 12.4584043,8.23529929 C12.5280634,8.30919986 12.6300191,8.42291143 12.7571348,8.57246198 L12.7571348,8.57246198 L12.965786,8.82317052 C13.3400574,9.281764 13.7140665,9.78922793 14.0637367,10.3326541 C14.9193615,11.6623895 15.4927472,12.9879494 15.6490159,14.2520519 C15.9122514,16.3814385 14.955762,18.1128203 12.5915279,19.2051685 L12.5906761,20.2522716 C12.5906761,20.5211563 12.3707433,20.7391304 12.0994425,20.7391304 C11.8582863,20.7391304 11.6577171,20.566904 11.6161234,20.3397851 L11.608209,20.2522716 L11.6081753,19.2055464 C9.24334373,18.1132197 8.28660332,16.3816841 8.54986915,14.2520519 C8.7061379,12.9879494 9.27952361,11.6623895 10.1351483,10.3326541 C10.4848185,9.78922793 10.8588277,9.281764 11.2330991,8.82317052 C11.3459675,8.68487314 11.4466908,8.56561805 11.532258,8.46708094 L11.532258,8.46708094 Z M12.0994425,9.31060536 L11.9969642,9.4355287 C11.6446193,9.86725583 11.2920121,10.3456811 10.963507,10.8562143 C10.1797635,12.0742384 9.66050845,13.2746583 9.52504439,14.3704657 C9.30439706,16.1553448 10.1100895,17.5274448 12.2906389,18.4405985 L12.2906389,18.4405985 L12.0994425,18.3564431 L12.3630929,18.2337186 C14.1299606,17.3603114 14.8244827,16.1248778 14.6935383,14.5601212 L14.6935383,14.5601212 L14.6738407,14.3704657 C14.5383766,13.2746583 14.0191216,12.0742384 13.235378,10.8562143 C12.906873,10.3456811 12.5542658,9.86725583 12.2019208,9.4355287 L12.2019208,9.4355287 L12.0994425,9.31060536 Z M12.044848,3.00183966 L12.2032695,3.00221434 C15.0440618,3.04285123 17.651111,4.93237382 18.4215314,7.76925633 L18.3282843,7.79842172 C20.2519273,7.14549065 22.4721677,8.01636463 23.4447356,9.81345208 L23.5377762,9.9962261 C24.6385451,12.0690613 23.6882753,14.7200739 21.5873714,15.7037891 C21.0493038,16.0237546 20.4046111,16.1626571 19.6644396,16.1626571 C19.3931388,16.1626571 19.173206,15.9446829 19.173206,15.6757982 C19.173206,15.4069135 19.3931388,15.1889393 19.6644396,15.1889393 C20.2407742,15.1889393 20.7156474,15.0866254 21.1243434,14.8463183 C22.7703214,14.0735879 23.5047547,12.0247047 22.6591283,10.4313965 C21.9309979,8.90792166 20.0798666,8.17237287 18.5439611,8.75694056 C18.5565819,8.84320089 18.5646727,8.93192786 18.5704883,9.02414817 L18.5788464,9.19444222 C18.5808075,9.25191206 18.5820274,9.31261554 18.5827569,9.38413807 L18.5837257,10.4177224 C18.5837257,11.030804 17.7073893,11.0648641 17.6100186,10.5199027 L17.6012586,10.4177224 L17.6010714,9.51014136 C17.6004051,9.31502048 17.5977545,9.20889419 17.5899344,9.08488702 C17.5781738,8.89839392 17.5554063,8.73793337 17.5176789,8.58836757 L17.5140032,8.57270202 C17.5137782,8.57166428 17.5135562,8.5706249 17.5133374,8.56958389 C17.0512473,6.37130407 15.4888401,4.69991475 13.3456444,4.16877387 C12.9198369,4.05367873 12.491284,3.9915255 12.0672835,3.97820016 C11.5974739,3.98045319 11.1204917,4.04332819 10.6466367,4.17139252 C8.51355152,4.69991475 6.95114436,6.37130407 6.48905423,8.56958389 C6.42245802,8.88639895 6.06830404,9.05184087 5.77935589,8.90111724 C4.19023084,8.07218407 2.12293716,8.80007682 1.33401852,10.4497317 C0.497636915,12.0247047 1.2320702,14.0735879 2.92049545,14.8688331 C3.28674428,15.0866254 3.76161747,15.1889393 4.33795202,15.1889393 C4.60925283,15.1889393 4.82918559,15.4069135 4.82918559,15.6757982 C4.82918559,15.9446829 4.60925283,16.1626571 4.33795202,16.1626571 C3.59778057,16.1626571 2.95308779,16.0237546 2.45746747,15.7263039 C0.377156072,14.7496689 -0.579223134,12.2235804 0.364336842,10.1973317 L0.455370608,10.0145612 C1.35020312,8.1422938 3.53421241,7.18857919 5.47173829,7.73560008 L5.581,7.769 L5.58764534,7.7444681 C6.38952646,4.83783367 9.12192886,2.93233884 12.044848,3.00183966 Z"
          fill="currentColor"
        ></path>
      </g>
    </svg>
  );
}

export function SupportIcon(props: HTMLElementProps<'svg'>) {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M6.95789 1.34552C10.0084 -0.448506 13.7967 -0.448506 16.7419 1.34552C19.6224 3.03954 21.3894 6.15045 21.3947 9.44461C22.2192 9.51602 23.0186 9.94684 23.5029 10.6291C23.8968 11.2878 24.0794 11.9899 23.9676 12.6626L23.3457 16.8232C23.1562 17.8677 22.3299 18.7506 21.2875 18.983C20.8616 19.0779 20.4158 19.0633 19.9925 18.9547C18.5982 20.8006 16.5198 22.0696 14.189 22.5347C13.8086 23.3784 12.9461 24 11.9996 24C10.6265 24 9.60489 22.9751 9.60489 21.5975C9.60489 20.3201 10.7263 19.1951 11.9996 19.1951C13.2608 19.1951 14.3218 20.1811 14.3907 21.4646C16.2471 21.0072 17.8959 19.9787 19.0557 18.532C18.7858 18.3481 18.547 18.119 18.3568 17.851C17.9628 17.1923 17.7803 16.4902 17.8921 15.8175L18.5139 11.6569C18.6927 10.6718 19.4378 9.83043 20.3965 9.54297C20.4266 6.56672 18.8399 3.73965 16.2307 2.20514C13.5949 0.599649 10.1992 0.599649 7.46911 2.20514C4.94749 3.74108 3.39206 6.46838 3.31746 9.47515C3.35411 9.48167 3.39065 9.48899 3.42704 9.4971C4.52735 9.7424 5.38687 10.7125 5.50843 11.8134L6.10584 15.8094C6.21893 16.4902 6.03636 17.1923 5.62058 17.8844C4.9966 18.7608 3.79041 19.2235 2.71169 18.983C1.61138 18.7377 0.751858 17.7676 0.630299 16.6667L0.0328931 12.6706C-0.0801952 11.9899 0.102369 11.2878 0.518149 10.5957C0.931662 10.0149 1.60087 9.6158 2.31923 9.48264C2.39178 6.12454 4.1286 3.0688 6.95789 1.34552ZM13.3734 21.8315C13.3885 21.7546 13.3965 21.6764 13.3965 21.5975C13.3965 20.811 12.7609 20.1961 11.9996 20.1961C11.2773 20.1961 10.6027 20.8729 10.6027 21.5975C10.6027 22.4222 11.1776 22.999 11.9996 22.999C12.5555 22.999 13.0833 22.5979 13.2969 22.0828C13.2995 21.9919 13.3269 21.9055 13.3734 21.8315ZM20.8497 10.4853C20.8261 10.4838 20.8028 10.4808 20.7802 10.4762C20.1022 10.6314 19.5568 11.2495 19.4775 11.9619L18.8776 15.974C18.808 16.3927 18.9309 16.8653 19.1905 17.3025C19.5816 17.8519 20.3829 18.1592 21.071 18.0058C21.7529 17.8538 22.3025 17.2334 22.3821 16.5182L22.9821 12.5061C23.0516 12.0874 22.9287 11.6148 22.6691 11.1775C22.3356 10.7091 21.7039 10.4166 21.0983 10.4358C21.0236 10.4724 20.9387 10.4907 20.8497 10.4853ZM2.62658 10.4472C2.11316 10.5063 1.61931 10.7705 1.35192 11.1441C1.07044 11.6148 0.947549 12.0874 1.01838 12.5141L1.64114 16.6753C1.7705 17.3141 2.2917 17.8639 2.92814 18.0058C3.61633 18.1592 4.41753 17.8519 4.78682 17.3359C5.06829 16.8653 5.19118 16.3927 5.12035 15.966L4.49759 11.8048C4.36823 11.166 3.84703 10.6162 3.21059 10.4743L3.06159 10.4484C3.04818 10.4467 3.03475 10.4451 3.0213 10.4438C2.96403 10.4691 2.90102 10.484 2.83458 10.486C2.76086 10.4882 2.69039 10.4742 2.62658 10.4472Z"
        fill="currentColor"
      />
    </svg>
  );
}

export function UniversityIcon(props: HTMLElementProps<'svg'>) {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M11.9776 1L14.0881 2.85923L16.7963 2.09981L17.8911 4.69061L20.6604 5.18142L20.5227 7.99065L22.8049 9.63446L21.4619 12.1057L22.8049 14.577L20.5227 16.2208L20.6604 19.03L17.8911 19.5208L16.7963 22.1117L14.0881 21.3522L11.9776 23.2115L9.86721 21.3522L7.15907 22.1117L6.06431 19.5208L3.29486 19.03L3.43262 16.2208L1.15039 14.577L2.49339 12.1057L1.15039 9.63447L3.43262 7.99065L3.29487 5.18142L6.06431 4.69061L7.15907 2.09981L9.86721 2.85923L11.9776 1ZM11.9776 2.33271L10.1205 3.96882L7.73731 3.30053L6.77393 5.58043L4.33681 6.01235L4.45804 8.48446L2.44968 9.93102L3.63151 12.1057L2.44968 14.2804L4.45804 15.727L4.33681 18.199L6.77393 18.631L7.73731 20.9109L10.1205 20.2426L11.9776 21.8787L13.8348 20.2426L16.218 20.9109L17.1814 18.631L19.6185 18.199L19.4972 15.727L21.5056 14.2804L20.3238 12.1057L21.5056 9.93102L19.4972 8.48446L19.6185 6.01234L17.1814 5.58043L16.218 3.30053L13.8348 3.96882L11.9776 2.33271Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M12.2706 5.60153L11.9028 5.94664L11.5369 5.59949C11.6325 5.49875 11.7653 5.44188 11.9042 5.44226C12.0431 5.44265 12.1756 5.50026 12.2706 5.60153ZM11.9006 6.71198C11.7269 6.91816 11.5047 7.1931 11.2613 7.52116C10.6935 8.28657 10.0235 9.32407 9.58084 10.4412C9.13572 11.5645 8.94344 12.7095 9.24644 13.7259C9.53069 14.6794 10.2799 15.6144 11.9016 16.3341C13.5019 15.6155 14.2426 14.6818 14.524 13.7274C14.8241 12.7093 14.6335 11.563 14.1932 10.4394C13.7553 9.32196 13.0926 8.28434 12.5311 7.519C12.2913 7.19207 12.0721 6.9179 11.9006 6.71198ZM11.9028 5.94664C11.5369 5.59949 11.5369 5.59949 11.5369 5.59949L11.5361 5.60035L11.5346 5.60192L11.5296 5.60722L11.5119 5.62623C11.4967 5.64261 11.4749 5.66633 11.4471 5.697C11.3916 5.75833 11.3122 5.84755 11.2145 5.96156C11.0193 6.18943 10.7501 6.51721 10.4512 6.92013C9.85615 7.72219 9.13065 8.83907 8.64304 10.0696C8.15786 11.294 7.88499 12.6899 8.27972 14.0141C8.68206 15.3637 9.74512 16.5331 11.7093 17.3492C11.8338 17.401 11.9738 17.4007 12.0982 17.3485C14.043 16.5313 15.0941 15.3609 15.4916 14.0126C15.8814 12.69 15.6121 11.2955 15.1324 10.0714C14.6503 8.84118 13.9329 7.72442 13.3445 6.92229C13.0488 6.51936 12.7826 6.19156 12.5895 5.96367C12.4929 5.84965 12.4144 5.76042 12.3594 5.69908C12.332 5.6684 12.3104 5.64467 12.2954 5.62829L12.2729 5.60397L12.2714 5.60239C12.2714 5.60239 12.2706 5.60153 11.9028 5.94664Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M11.8512 16.379C12.1298 16.379 12.3556 16.6048 12.3556 16.8834V18.2647C12.3556 18.5432 12.1298 18.7691 11.8512 18.7691C11.5727 18.7691 11.3469 18.5432 11.3469 18.2647V16.8834C11.3469 16.6048 11.5727 16.379 11.8512 16.379Z"
        fill="currentColor"
      />
    </svg>
  );
}

export function MegaphoneIcon(props: HTMLElementProps<'svg'>) {
  return (
    <svg
      {...props}
      width="24px"
      height="24px"
      viewBox="0 0 24 24"
      version="1.1"
    >
      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
        <g transform="translate(2.000000, 3.000000)" fill="currentColor">
          <path d="M8.143,12.7991851 L6.64421737,12.8007721 L6.59581989,13.0776329 C6.58315814,13.1600887 6.57396715,13.2327133 6.56824691,13.2955068 L6.56212691,13.3857869 C6.53925571,13.9585785 6.65499063,14.3879686 6.72407593,14.6499587 C7.03807942,15.8407448 7.75732914,16.306839 7.77213216,16.5665588 C7.78693518,16.8262787 7.78693518,16.9992896 7.51136075,17.134491 C7.41577615,17.1813864 7.2467213,17.2074736 7.00419621,17.2127528 L4.44604432,17.2134233 C4.17051663,17.2134233 3.96421322,17.1698334 3.82713408,17.0826534 C3.40082299,16.811527 2.95305668,15.8135032 2.83908868,15.0305251 C2.77011416,14.5566592 2.7637557,13.8132278 2.82001331,12.800231 L2,12.8 C0.8954305,12.8 0,11.9045695 0,10.8 L0,7 C0,5.8954305 0.8954305,5 2,5 L9,5 C9.10948103,5.00117463 9.20312486,4.99767977 9.28322063,4.99410027 C10.4342369,4.9426611 11.0944612,4.67719617 11.4351318,4.50345463 L11.5033039,4.46773965 C12.9080252,3.71253392 13.4476237,3.24084609 14.2294768,2.65326532 C14.7507121,2.26154481 15.1927384,1.87347929 15.5555556,1.48906877 L16.0251834,1.14201898 C16.1618494,1.04102437 16.3157448,0.980002666 16.4728899,0.956855557 L16.5911395,0.946563927 L16.7092971,0.950278555 C16.9838715,0.975133654 17.2469909,1.11276668 17.4237314,1.35193205 C17.550884,1.52399497 17.6195009,1.73230227 17.6195009,1.94624951 L17.6195009,15.6466501 C17.6195009,16.159486 17.2334607,16.5821573 16.736122,16.6399224 L16.6195009,16.6466501 C16.5066088,16.6466501 16.3945317,16.6275342 16.2880222,16.5901128 L16.1202258,16.5311588 L15.502373,15.9807071 C15.2786946,15.7833349 15.0372887,15.5720746 14.7781552,15.346926 C14.0007549,14.6714802 13.1325013,14.0538205 12.3097504,13.5934316 C11.5502881,13.1684572 10.692251,13.0237069 10.2509361,12.9178568 L10.1495873,12.892065 C9.98308987,12.8463845 9.74303991,12.8198424 9.42943742,12.8124388 L9.23244962,12.8102932 L9.01780921,12.8127408 L8.143,12.7991851 Z M16.6195009,1.94624951 L16.211,2.247 L16.0308034,2.43190676 C15.7691829,2.68804398 15.4786701,2.94328494 15.1592763,3.19805356 L14.1851644,3.94361892 C13.487748,4.46960337 12.8932071,4.85585713 11.9768288,5.3485201 C11.3133863,5.70519982 10.4887887,5.94122128 9.32786628,5.99310316 L9,6 L2,6 C1.48716416,6 1.06449284,6.38604019 1.00672773,6.88337888 L1,7 L1,10.8 C1,11.3128358 1.38604019,11.7355072 1.88360439,11.7932723 L2.00028166,11.8 L3.87707352,11.8005287 L3.81847476,12.8556813 C3.76562244,13.8073612 3.77149288,14.4937342 3.82866067,14.8864859 C3.90353053,15.4008536 4.19919089,16.0562689 4.333725,16.2109731 L4.341,16.218 L4.34772445,16.2144761 L6.323,16.213 L6.18791129,15.982877 C6.05168032,15.7367695 5.93613182,15.4759024 5.84288379,15.1940353 L5.75712917,14.9049371 C5.72439239,14.7807904 5.71171627,14.7313583 5.69237011,14.6488408 C5.61315514,14.3109639 5.56589358,13.9789414 5.56047784,13.6061342 L5.5644167,13.318153 L5.57237051,13.2047864 C5.57980464,13.1231787 5.59102362,13.033521 5.60599686,12.9350268 L5.66214884,12.6122479 L5.81775712,11.8016467 L8.15849369,11.7993052 L8.99658386,11.8129661 C9.519717,11.8018599 9.93177401,11.8239157 10.2580592,11.8905925 L11.1092587,12.0886959 C11.5251102,12.1907256 11.8930593,12.3052131 12.2536172,12.4565082 C12.4428846,12.5359274 12.6243473,12.6235563 12.7980699,12.7207667 C13.679972,13.214255 14.6041305,13.8709966 15.4340273,14.5920539 L16.619,15.634 L16.6195009,1.94624951 Z M18.7357507,11.2641046 L18.8111202,11.3137227 L19.8111202,12.1085869 C20.0272917,12.2804139 20.06324,12.5949488 19.8914131,12.8111202 C19.8150455,12.9071965 19.7104888,12.967673 19.5989068,12.9901311 L19.5142338,12.9998084 C19.4289049,13.0022817 19.3426006,12.9830294 19.2642493,12.9410311 L19.1888798,12.8914131 L18.1888798,12.0965488 C17.9727083,11.9247219 17.93676,11.610187 18.1085869,11.3940155 C18.1849545,11.2979393 18.2895112,11.2374627 18.4010932,11.2150046 L18.4857662,11.2053273 C18.5710951,11.2028541 18.6573994,11.2221064 18.7357507,11.2641046 Z M20.5,8.70513577 C20.7761424,8.70513577 21,8.9289934 21,9.20513577 C21,9.45059566 20.8231248,9.65474414 20.5898756,9.6970801 L20.5,9.70513577 L18.5,9.70513577 C18.2238576,9.70513577 18,9.48127815 18,9.20513577 C18,8.95967588 18.1768752,8.7555274 18.4101244,8.71319144 L18.5,8.70513577 L20.5,8.70513577 Z M9,6 L9,11.818634 C8.874133,11.8088742 8.721067,11.8021858 8.540802,11.7985687 C8.360537,11.7949517 8.18026967,11.7949517 8,11.7985687 L8,6 L9,6 Z M19.4962832,4.99998689 C19.6100992,4.99909905 19.7248365,5.0368465 19.819285,5.11521817 C20.0081821,5.27196151 20.0523401,5.53844132 19.9359744,5.74497592 L19.8847818,5.81928505 L18.8847818,7.02442082 C18.8064102,7.11886933 18.7006044,7.1771331 18.5885747,7.19723902 L18.5037168,7.20514888 C18.3899008,7.20603672 18.2751635,7.16828928 18.180715,7.08991761 C17.9918179,6.93317426 17.9476599,6.66669445 18.0640256,6.46015986 L18.1152182,6.38585073 L19.1152182,5.18071495 C19.1935898,5.08626645 19.2993956,5.02800268 19.4114253,5.00789675 L19.4962832,4.99998689 Z"></path>
        </g>
      </g>
    </svg>
  );
}

export function DevHubIcon(props: HTMLElementProps<'svg'>) {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M5 2C3.34315 2 2 3.34315 2 5V5.5H22V5C22 3.34315 20.6569 2 19 2H5ZM22 6.5H2V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V6.5ZM1 5C1 2.79086 2.79086 1 5 1H19C21.2091 1 23 2.79086 23 5V19C23 21.2091 21.2091 23 19 23H5C2.79086 23 1 21.2091 1 19V5ZM15.5 9.5C15.5 8.94772 15.9477 8.5 16.5 8.5H19.5C20.0523 8.5 20.5 8.94772 20.5 9.5C20.5 10.0523 20.0523 10.5 19.5 10.5H16.5C15.9477 10.5 15.5 10.0523 15.5 9.5ZM4 10C4 9.44772 4.44772 9 5 9H13C13.5523 9 14 9.44772 14 10V18C14 18.5523 13.5523 19 13 19H5C4.44772 19 4 18.5523 4 18V10ZM13 10H5V18H13V10ZM15.5 12.5002C15.5 11.9479 15.9477 11.5002 16.5 11.5002H19.5C20.0523 11.5002 20.5 11.9479 20.5 12.5002C20.5 13.0525 20.0523 13.5002 19.5 13.5002H16.5C15.9477 13.5002 15.5 13.0525 15.5 12.5002Z"
        fill="currentColor"
      />
    </svg>
  );
}

export function ForumsIcon(props: HTMLElementProps<'svg'>) {
  return (
    <svg x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24" {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        fill="currentColor"
        d="M19.2,18.6H22c0.6,0,1-0.4,1-1V9c0-0.6-0.4-1-1-1H10C9.4,8,9,8.4,9,9v8.6c0,0.6,0.4,1,1,1h5.4l3.8,3.2V18.6z
	 M20.2,24l-5.2-4.4H10c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h12c1.1,0,2,0.9,2,2v8.6c0,1.1-0.9,2-2,2h-1.8V24z"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        fill="currentColor"
        d="M8.8,11.3H8.6H7.6l-3.5,3.5l-0.4-3.5H2c-0.6,0-1-0.4-1-1V2c0-0.6,0.4-1,1-1h12c0.6,0,1,0.4,1,1v5.9h1V2
	c0-1.1-0.9-2-2-2H2C0.9,0,0,0.9,0,2v8.3c0,1.1,0.9,2,2,2h0.8L3.3,17L8,12.3h0.8V11.3z"
      />
    </svg>
  );
}

export function DocsIcon(props: HTMLElementProps<'svg'>) {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M21.663 3.28866C17.3808 3.4577 15.0445 4.33805 13.7942 5.13189C13.1695 5.52851 12.8121 5.90576 12.6151 6.16849C12.5162 6.3003 12.4566 6.40475 12.4235 6.47045C12.4192 6.47903 12.4153 6.48697 12.4119 6.49422V20.6998C12.6514 20.48 12.9511 20.2468 13.3251 20.013C14.7758 19.1064 17.3298 18.2008 21.8065 18.0286C21.8091 18.0285 21.8118 18.0284 21.8144 18.0283C21.8177 18.0283 21.8209 18.0282 21.8242 18.0282C22.0544 18.0282 22.2912 17.94 22.4659 17.7944C22.6382 17.6508 22.7259 17.4745 22.7259 17.2967V4.19036C22.7259 3.78449 22.6004 3.64597 22.4695 3.58052C22.4253 3.55841 22.385 3.52932 22.35 3.49436C22.1544 3.29873 21.9906 3.28883 21.663 3.28866ZM12.3902 22.2022C12.3895 22.2043 12.3888 22.2064 12.3882 22.2085C12.3881 22.2087 12.3881 22.2086 12.3885 22.2073L12.3893 22.2049L12.3902 22.2022ZM21.8337 18.9482C17.4645 19.1172 15.0846 19.9983 13.8127 20.7932C13.1774 21.1902 12.8153 21.5677 12.6162 21.8301C12.5163 21.9617 12.4564 22.0659 12.4232 22.1312C12.4066 22.164 12.3967 22.1871 12.3918 22.1992L12.3882 22.2085C12.3256 22.3959 12.15 22.5227 11.9519 22.5227C11.7537 22.5227 11.5781 22.3959 11.5156 22.2085L11.512 22.1992C11.507 22.1871 11.4971 22.164 11.4805 22.1312C11.4473 22.0659 11.3874 21.9617 11.2875 21.8301C11.0884 21.5677 10.7263 21.1902 10.091 20.7932C8.81912 19.9983 6.43918 19.1172 2.06999 18.9482C1.62259 18.9459 1.18243 18.7792 0.84886 18.5012C0.510541 18.2193 0.257812 17.7998 0.257812 17.2967V4.02015C0.257812 3.94874 0.274439 3.87831 0.306376 3.81443L0.309573 3.80804C0.392405 3.64237 0.482267 3.46264 0.57374 3.30257C0.663216 3.14598 0.772943 2.97406 0.903182 2.84382C0.938142 2.80886 0.978511 2.77976 1.02273 2.75765C1.03546 2.75129 1.0484 2.7448 1.06155 2.73821C1.37246 2.58234 1.79866 2.36866 2.24973 2.36866C2.25574 2.36866 2.26175 2.36878 2.26775 2.36901C6.6607 2.54129 9.17301 3.44749 10.6027 4.35522C11.2566 4.77043 11.6808 5.18405 11.9519 5.5226C12.2229 5.18405 12.6471 4.77043 13.301 4.35522C14.7307 3.44749 17.243 2.54129 21.636 2.36901C21.642 2.36878 21.648 2.36866 21.654 2.36866L21.6712 2.36866C22.0055 2.36853 22.4882 2.36834 22.9483 2.79357C23.4486 3.07816 23.6459 3.60071 23.6459 4.19036V17.2967C23.6459 17.7998 23.3932 18.2193 23.0549 18.5012C22.7213 18.7792 22.2811 18.9459 21.8337 18.9482ZM11.4919 6.49422C11.4884 6.48697 11.4845 6.47903 11.4802 6.47045C11.4471 6.40475 11.3875 6.3003 11.2886 6.16849C11.0916 5.90576 10.7342 5.52851 10.1095 5.13189C8.85936 4.33812 6.52332 3.45786 2.24193 3.28871C2.0487 3.29114 1.83184 3.38373 1.51315 3.54124C1.47643 3.58837 1.42952 3.65926 1.37252 3.75901C1.3097 3.86895 1.2458 3.99358 1.17781 4.1289V17.2967C1.17781 17.4745 1.26551 17.6508 1.43783 17.7944C1.61253 17.94 1.84934 18.0282 2.07951 18.0282C2.08541 18.0282 2.0913 18.0283 2.09719 18.0286C6.57387 18.2008 9.12793 19.1064 10.5786 20.013C10.9526 20.2468 11.2523 20.48 11.4919 20.6998V6.49422ZM18.0743 6.42833L17.7393 6.74359L17.4044 6.42833C17.4913 6.33596 17.6125 6.28359 17.7393 6.28359C17.8662 6.28359 17.9874 6.33596 18.0743 6.42833ZM18.1991 15.2078C19.4817 14.5805 20.1968 13.7302 20.4789 12.7604C20.7741 11.7455 20.569 10.6868 20.2104 9.76785C19.8498 8.84387 19.3142 8.00972 18.8761 7.41291C18.6559 7.11282 18.4575 6.86889 18.3134 6.69921C18.2413 6.6143 18.1827 6.54778 18.1415 6.50192C18.1209 6.47898 18.1047 6.4612 18.0933 6.44884L18.08 6.43441L18.0762 6.43031L18.0743 6.42833C18.0742 6.42817 18.0743 6.42833 17.7393 6.74359C17.4044 6.42833 17.4045 6.42817 17.4044 6.42833L17.4025 6.43031L17.3987 6.43441L17.3853 6.44884C17.374 6.4612 17.3577 6.47898 17.3372 6.50192C17.296 6.54778 17.2373 6.6143 17.1653 6.69921C17.0212 6.86889 16.8228 7.11282 16.6025 7.41291C16.1645 8.00972 15.6288 8.84387 15.2683 9.76785C14.9097 10.6868 14.7045 11.7455 14.9998 12.7604C15.2819 13.7301 15.9968 14.5803 17.2791 15.2076V15.7648C17.2791 16.0189 17.4851 16.2248 17.7391 16.2248C17.9932 16.2248 18.1991 16.0189 18.1991 15.7648V15.2078ZM17.9178 14.3196C18.9323 13.7933 19.4077 13.149 19.5955 12.5034C19.8109 11.763 19.6756 10.9281 19.3534 10.1023C19.0331 9.28161 18.5475 8.52002 18.1345 7.95726C17.9885 7.75843 17.8531 7.58633 17.7393 7.44736C17.6256 7.58633 17.4901 7.75843 17.3442 7.95726C16.9312 8.52002 16.4456 9.28161 16.1253 10.1023C15.8031 10.9281 15.6678 11.763 15.8832 12.5034C16.0709 13.1489 16.5463 13.7932 17.5606 14.3195C17.6155 14.2963 17.6758 14.2836 17.7391 14.2836C17.8025 14.2836 17.8629 14.2964 17.9178 14.3196Z"
        fill="currentColor"
      />
    </svg>
  );
}
