Star Score Meter SVG element, flat

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/tKc0Stiqezei/amnt.svg" alt="Star Score Meter" width="48" height="48">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="amber" data-name="Amber"><path d="M510 147c-7 2-38 70-43 81-5 9-24 52-29 55-8 5-25 4-34 6-14 1-103 11-108 14s-6 6-4 11c1 6 46 45 54 53 7 8 48 45 50 51 1 5-2 13-3 19-6 34-13 69-19 103-1 7-7 23-1 28 6 6 59-26 70-32s61-36 70-35c7 1 70 37 81 44 7 3 43 25 49 25 3 0 6-1 7-4 4-7-2-24-4-32-7-34-13-69-19-103-1-4-3-9-2-13 2-6 47-47 55-54 7-7 51-45 52-53 0-6-4-7-9-8-11-4-25-4-36-5-24-3-48-7-72-10-9-1-25 0-31-5-6-4-25-49-29-58-5-10-33-72-37-75-3-2-5-3-8-3z" fill="#fdc502" stroke="#fdc502"/></g><g id="blue" data-name="Blue"><path d="M512 795v-139c-73 0-146 2-218-1-18-1-38 0-56 0-49 0-103 1-109 63-3 33 18 66 51 75 25 6 73 2 102 2 76 0 153 0 230 0z" fill="#0b8bfb" stroke="#0b8bfb"/></g><g id="mist" data-name="Mist"><path d="M512 795c76 0 151 0 227 0 29 0 74 4 101-1 32-7 55-36 55-68 0-86-100-70-157-70-76 0-151 0-226 0z" fill="#d9d8d8" stroke="#d9d8d8"/></g><g id="midnight" data-name="Midnight"><path d="M192 637c-68 6-109 90-62 145 11 12 25 22 41 27 32 11 132 5 172 5 110 0 220 0 330 0 49 0 113 4 160-1 68-6 107-90 60-144-10-13-25-23-41-27-32-10-130-5-169-5-111 0-222 0-332 0-35 0-71 0-105 0-18 0-37-1-54 0zm320 19c75 0 150 0 226 0 57 0 157-16 157 70 0 32-23 61-55 68-27 5-72 1-101 1-76 0-151 0-227 0-77 0-154 0-230 0-29 0-77 4-102-2-33-9-54-42-51-75 6-62 60-63 109-63 18 0 38-1 56 0 72 3 145 1 218 1z" fill="#191d25" stroke="#191d25"/><path d="M510 521c16 9 117 65 128 67 24 4 34-16 31-36-6-37-14-74-21-111-1-5-4-12-3-17 2-7 49-47 57-55 12-13 37-31 45-45 7-12 4-29-9-36-15-8-84-13-105-16-8-1-31-2-37-6-4-2-25-52-29-60-9-17-24-58-36-69-5-6-12-8-19-8-6 0-12 2-16 5-13 9-31 56-39 72-5 9-27 57-31 60-6 4-28 5-36 6-20 2-94 8-107 17-12 8-13 24-7 35 7 12 33 34 45 45 6 7 54 50 55 54 1 5-2 14-3 19-7 37-15 75-20 112-3 17 5 36 25 35 8 0 124-61 132-68zm0-374c3 0 5 1 8 3 4 3 32 65 37 75 4 9 23 54 29 58 6 5 22 4 31 5 24 3 48 7 72 10 11 1 25 1 36 5 5 1 9 2 9 8-1 8-45 46-52 53-8 7-53 48-55 54-1 4 1 9 2 13 6 34 12 69 19 103 2 8 8 25 4 32-1 3-4 4-7 4-6 0-42-22-49-25-11-7-74-43-81-44-9-1-59 29-70 35s-64 38-70 32c-6-5 0-21 1-28 6-34 13-69 19-103 1-6 4-14 3-19-2-6-43-43-50-51-8-8-53-47-54-53-2-5-1-8 4-11s94-13 108-14c9-2 26-1 34-6 5-3 24-46 29-55 5-11 36-79 43-81z" fill="#191d25" stroke="#191d25"/></g></svg>

.star-score-meter {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/tKc0Stiqezei/amnt.svg");
  background-size: contain;
}

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

import StarScoreMeterSvg from "./star-score-meter.jsx"; // from the React tab above

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