Zigzag Arrow SVG element, flat

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/e-GVN7lHXnYC/amnt.svg" alt="Zigzag Arrow" width="48" height="48">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="purple" data-name="Purple"><path d="M304 356l-261 224 53 59 206-175 164 161 175-160c18 10 56 58 70 61 9 2 22 0 32 0 31 0 63 0 95 0 0 10-2 74 1 78 1 2 2 0 4-1 2 0 40-35 45-39 31-26 63-51 92-79l-142-123v82c-16 0-92 3-101 0-7-3-16-15-21-20-25-23-51-45-74-68l-174 161z" fill="#0154fb" stroke="#0154fb"/></g><g id="grape" data-name="Grape"><path d="M822 542c0 11-2 85 1 89 4 5 8 3 11 1 8-3 48-41 57-49 13-11 105-87 108-93 1-2 2-4 1-8-2-6-99-87-112-99-8-7-50-47-57-49-3-1-7 0-8 4-4 7-1 76-1 89-15 0-71 4-81-1-7-3-28-26-35-33-8-7-60-57-64-57-5 0-13 10-17 14-40 36-79 72-119 109-12 11-24 27-39 35-28-29-58-57-86-85-9-9-71-73-76-73-4 0-11 7-14 10-61 53-124 104-185 159-9 8-82 67-83 72s2 7 5 11c13 16 28 30 41 45 24 25 19 34 46 11 40-35 82-70 123-105 21-18 41-38 63-53 18 19 155 157 166 160l175-160c9 8 52 52 59 55 11 4 102 1 121 1zM304 356l164 161 174-161c23 23 49 45 74 68 5 5 14 17 21 20 9 3 85 0 101 0v-82l142 123c-29 28-61 53-92 79-5 4-43 39-45 39-2 1-3 3-4 1-3-4-1-68-1-78-32 0-64 0-95 0-10 0-23 2-32 0-14-3-52-51-70-61l-175 160-164-161-206 175-53-59z" fill="#011d63" stroke="#011d63"/></g></svg>

.zigzag-arrow {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/e-GVN7lHXnYC/amnt.svg");
  background-size: contain;
}

.zigzag-arrow {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/e-GVN7lHXnYC/amnt.svg") center / contain no-repeat;
}

import ZigzagArrowSvg from "./zigzag-arrow.jsx"; // from the React tab above

<ZigzagArrowSvg width={48} height={48} />