Curved Arrow SVG element, flat

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Iywqrf0v41pt/amnt.svg" alt="Curved 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="M767 176v103c-161 0-320 54-453 144-58 40-111 88-156 142-30 35-110 146-108 190 3 43 51 66 87 47 29-15 44-61 60-88 36-61 82-117 135-163 120-104 275-163 434-163 5 14 1 80 1 99l203-155z" fill="#0172fc" stroke="#0172fc"/></g><g id="grape" data-name="Grape"><path d="M744 411c0 17-4 91 3 100 6 9 16 6 24 1 27-17 52-39 77-59 26-20 52-40 78-60 12-9 60-42 66-51 3-4 4-9 3-14-2-10-62-53-74-62-26-20-52-40-78-60-14-10-66-55-77-59-7-3-14-2-19 4-7 9-3 89-3 106-26-1-51 4-77 7-135 17-264 70-376 148-58 41-113 90-157 146-33 42-108 145-106 197 3 70 90 100 139 53 11-10 19-25 26-39 33-65 75-124 127-176 106-106 273-182 424-182zm23-235l203 156-203 155c0-19 4-85-1-99-159 0-314 59-434 163-53 46-99 102-135 163-16 27-31 73-60 88-36 19-84-4-87-47-2-44 78-155 108-190 45-54 98-102 156-142 133-90 292-144 453-144z" fill="#011c63" stroke="#011c63"/></g></svg>

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

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

import CurvedArrowSvg from "./curved-arrow.jsx"; // from the React tab above

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