Bent Arrow SVG element, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="blue" data-name="Blue"><path d="M126 127c0 104-1 208-1 313 0 44 0 88 0 133 0 29-2 60 3 89 4 22 13 44 26 62 42 61 97 66 165 66 27 0 56 0 84 0 104 0 209 0 313 0v74c17-19 42-33 62-48 40-30 79-62 121-90l-182-139v82c-82 0-165 0-247 0-26 0-52 0-77 0-49 0-97 2-115-54-11-30-5-198-5-242 0-82 0-164 0-246z" fill="#0081fb" stroke="#0081fb"/></g><g id="grape" data-name="Grape"><path d="M100 101c0 110-1 219-1 329 0 46 0 94 0 141 0 33-2 67 4 100 5 22 14 43 26 62 28 45 79 78 132 82 21 1 42 0 63 0 16 0 32 1 48 1 35-2 70-1 104 0 23 1 46 0 70-1 47-1 96 1 144 1 0 14-3 74 0 83 1 3 4 6 8 7 7 1 15-9 21-13 24-19 49-37 74-56 25-18 50-37 75-55 9-7 65-46 67-51 2-3 2-6 1-10-2-5-132-100-148-112-25-19-50-38-75-57-5-4-11-11-18-6-7 4-4 84-4 97-78 0-156 0-234 0-26 0-53 0-78 0-64 0-79-12-79-76 0-156 0-311 0-466zm26 26h147c0 82 0 164 0 246 0 44-6 212 5 242 18 56 66 54 115 54 25 0 51 0 77 0 82 0 165 0 247 0v-82l182 139c-42 28-81 60-121 90-20 15-45 29-62 48v-74c-104 0-209 0-313 0-28 0-57 0-84 0-68 0-123-5-165-66-13-18-22-40-26-62-5-29-3-60-3-89 0-45 0-89 0-133 0-105 1-209 1-313z" fill="#011e5a" stroke="#011e5a"/></g></svg>

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

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

import BentArrowSvg from "./bent-arrow.jsx"; // from the React tab above

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