mango-v4-ui/components/icons/ChartOnLeft.tsx

const ChartOnLeft = ({ className }: { className?: string }) => {
  return (
    <svg
      className={`${className}`}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 106 60"
      fill="none"
    >
      <rect
        width="106"
        height="60"
        rx="4"
        fill="var(--bkg-1)"
        // stroke="var(--bkg-4)"
      />
      <rect x="2" y="2" width="102" height="4" rx="2" fill="var(--bkg-2)" />
      <rect x="66" y="8" width="18" height="50" rx="2" fill="var(--bkg-2)" />
      <rect
        x="78"
        y="10"
        width="2"
        height="12"
        transform="rotate(90 78 10)"
        fill="var(--down)"
      />
      <rect
        x="78"
        y="54"
        width="2"
        height="12"
        transform="rotate(90 78 54)"
        fill="var(--up)"
      />
      <rect
        x="76"
        y="14"
        width="2"
        height="10"
        transform="rotate(90 76 14)"
        fill="var(--down)"
      />
      <rect
        x="76"
        y="50"
        width="2"
        height="10"
        transform="rotate(90 76 50)"
        fill="var(--up)"
      />
      <rect
        x="74"
        y="18"
        width="2"
        height="8"
        transform="rotate(90 74 18)"
        fill="var(--down)"
      />
      <rect
        x="74"
        y="46"
        width="2"
        height="8"
        transform="rotate(90 74 46)"
        fill="var(--up)"
      />
      <rect
        x="72"
        y="22"
        width="2"
        height="6"
        transform="rotate(90 72 22)"
        fill="var(--down)"
      />
      <rect
        x="72"
        y="42"
        width="2"
        height="6"
        transform="rotate(90 72 42)"
        fill="var(--up)"
      />
      <rect
        x="70"
        y="26"
        width="2"
        height="4"
        transform="rotate(90 70 26)"
        fill="var(--down)"
      />
      <rect
        x="70"
        y="38"
        width="2"
        height="4"
        transform="rotate(90 70 38)"
        fill="var(--up)"
      />
      <rect
        x="68"
        y="30"
        width="2"
        height="2"
        transform="rotate(90 68 30)"
        fill="var(--down)"
      />
      <rect
        x="68"
        y="34"
        width="2"
        height="2"
        transform="rotate(90 68 34)"
        fill="var(--up)"
      />
      <rect x="86" y="8" width="18" height="50" rx="2" fill="var(--bkg-2)" />
      <rect
        x="94"
        y="10"
        width="2"
        height="6"
        transform="rotate(90 94 10)"
        fill="var(--fgd-4)"
      />
      <rect
        x="102"
        y="14"
        width="2"
        height="14"
        transform="rotate(90 102 14)"
        fill="var(--fgd-4)"
      />
      <rect
        x="102"
        y="26"
        width="2"
        height="14"
        transform="rotate(90 102 26)"
        fill="var(--fgd-4)"
      />
      <rect
        x="102"
        y="18"
        width="4"
        height="14"
        transform="rotate(90 102 18)"
        fill="var(--fgd-4)"
      />
      <rect
        x="102"
        y="10"
        width="2"
        height="6"
        transform="rotate(90 102 10)"
        fill="var(--fgd-4)"
      />
      <rect x="2" y="44" width="62" height="14" rx="2" fill="var(--bkg-2)" />
      <rect
        x="18"
        y="48"
        width="2"
        height="12"
        transform="rotate(90 18 48)"
        fill="var(--fgd-4)"
      />
      <rect
        x="18"
        y="52"
        width="2"
        height="12"
        transform="rotate(90 18 52)"
        fill="var(--fgd-4)"
      />
      <rect
        x="32"
        y="48"
        width="2"
        height="12"
        transform="rotate(90 32 48)"
        fill="var(--fgd-4)"
      />
      <rect
        x="32"
        y="52"
        width="2"
        height="12"
        transform="rotate(90 32 52)"
        fill="var(--fgd-4)"
      />
      <rect
        x="46"
        y="48"
        width="2"
        height="12"
        transform="rotate(90 46 48)"
        fill="var(--fgd-4)"
      />
      <rect
        x="46"
        y="52"
        width="2"
        height="12"
        transform="rotate(90 46 52)"
        fill="var(--fgd-4)"
      />
      <rect
        x="60"
        y="48"
        width="2"
        height="12"
        transform="rotate(90 60 48)"
        fill="var(--fgd-4)"
      />
      <rect
        x="60"
        y="52"
        width="2"
        height="12"
        transform="rotate(90 60 52)"
        fill="var(--fgd-4)"
      />
      <rect x="2" y="8" width="62" height="34" rx="2" fill="var(--bkg-2)" />
      <rect x="6" y="29" width="2" height="7" fill="var(--up)" />
      <rect x="10" y="25" width="2" height="7" fill="var(--up)" />
      <rect x="18" y="23" width="2" height="7" fill="var(--down)" />
      <rect x="30" y="21" width="2" height="7" fill="var(--up)" />
      <rect x="38" y="16" width="2" height="7" fill="var(--up)" />
      <rect x="50" y="17" width="2" height="7" fill="var(--up)" />
      <rect x="14" y="25" width="2" height="3" fill="var(--down)" />
      <rect x="22" y="28" width="2" height="3" fill="var(--up)" />
      <rect x="26" y="27" width="2" height="3" fill="var(--down)" />
      <rect x="34" y="21" width="2" height="3" fill="var(--down)" />
      <rect x="42" y="18" width="2" height="3" fill="var(--down)" />
      <rect x="46" y="20" width="2" height="3" fill="var(--down)" />
      <rect x="54" y="16" width="2" height="3" fill="var(--down)" />
      <rect x="58" y="17" width="2" height="3" fill="var(--down)" />
    </svg>
  )
}

export default ChartOnLeft