Edit Button SVG element, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="ivory" data-name="Ivory"><path d="M748 240h-472c-120-1-226 113-225 231v57c-1 129 112 229 238 229 155 0 311 0 466 0l6-1c16 1 34-5 49-9 92-30 163-121 163-219v-57c1-118-105-232-225-231zm62 94v11c-1 28-51 71-70 91-8 7-13 13-23 14-3 0-5-2-8-2-6 2-13 13-17 17-14 14-28 27-41 41-37 36-72 74-110 109-9 7-16 19-26 25-12 8-27 10-39 16 18 6 58-9 68 12 3 5 3 10 2 14-4 22-32 17-47 17-55 0-109 0-163 0-21 0-96 4-110-2-6-3-10-10-11-16s0-13 5-18c2-3 6-5 10-6 12-2 27 0 40 0 35 0 71 0 107 0 11-21 24-68 32-93 3-8 5-19 10-27 7-12 23-23 33-33 38-38 76-77 115-114 14-14 33-29 44-45 2-2 2-5 4-7 6-8 39-42 46-46 11-8 9-4 21-14 46-43 70-19 105 16 12 12 21 23 23 40z" fill="#fcf6de" stroke="#fcf6de"/></g><g id="grape" data-name="Grape"><path d="M276 206c-107 5-206 76-242 178-13 38-17 78-17 119 0 64 15 126 53 178 43 59 111 100 184 108 33 4 68 1 102 1 130 0 262 3 393 0 118-3 222-90 250-205 7-29 8-59 8-89 0-65-15-128-54-181-44-59-114-101-189-108-31-3-64-1-95-1-86 0-173 0-258 0-45 0-90-2-135 0zM51 471c-1-118 105-232 225-231h472c120-1 226 113 225 231v57c0 98-71 189-163 219-15 4-33 10-49 9l-6 1c-155 0-311 0-466 0-126 0-239-100-238-229z" fill="#02266b" stroke="#02266b"/><path d="M767 379l-79-79c10-10 19-23 34-25 6-1 14 0 20 3 10 5 40 36 45 46 3 6 4 13 4 19-2 16-14 26-24 36zm-97-70l85 87-13 12-84-87zm-23 22l85 87-13 13c-12-19-66-68-85-87zm-23 30l25 26-175 176c-7-13-14-21-28-25zm36 38l35 34-177 177c-6-18-17-30-36-33zM432 555c19-1 24 10 28 26 5 20 21 8 33 21 6 5 11 18 6 25-1 2-48 19-55 21-1-23-30-30-31-39 0-3 17-50 19-54zM810 345v-11c-2-17-11-28-23-40-35-35-59-59-105-16-12 10-10 6-21 14-7 4-40 38-46 46-2 2-2 5-4 7-11 16-30 31-44 45-39 37-77 76-115 114-10 10-26 21-33 33-5 8-7 19-10 27-8 25-21 72-32 93-3 11-7 29 10 31 10 1 75-26 89-32 12-6 27-8 39-16 10-6 17-18 26-25 38-35 73-73 110-109 13-14 27-27 41-41 4-4 11-15 17-17 3 0 5 2 8 2 10-1 15-7 23-14 19-20 69-63 70-91z" fill="#02266b" stroke="#02266b"/></g><g id="teal" data-name="Teal"><path d="M660 399l-178 178c19 3 30 15 36 33l177-177z" fill="#03b1a2" stroke="#03b1a2"/><path d="M624 361l-178 177c14 4 21 12 28 25l175-176z" fill="#03b1a2" stroke="#03b1a2"/><path d="M276 240h472z" fill="#03b1a2" stroke="#03b1a2"/><path d="M51 528v-57z" fill="#03b1a2" stroke="#03b1a2"/><path d="M973 528v-57z" fill="#03b1a2" stroke="#03b1a2"/><path d="M810 345v-11z" fill="#03b1a2" stroke="#03b1a2"/><path d="M755 757l6-1z" fill="#03b1a2" stroke="#03b1a2"/></g><g id="coral" data-name="Coral"><path d="M377 657c-36 0-72 0-107 0-13 0-28-2-40 0-4 1-8 3-10 6-5 5-6 12-5 18s5 13 11 16c14 6 89 2 110 2 54 0 108 0 163 0 15 0 43 5 47-17 1-4 1-9-2-14-10-21-50-6-68-12-14 6-79 33-89 32-17-2-13-20-10-31z" fill="#fc615b" stroke="#fc615b"/><path d="M767 379c10-10 22-20 24-36 0-6-1-13-4-19-5-10-35-41-45-46-6-3-14-4-20-3-15 2-24 15-34 25z" fill="#fc615b" stroke="#fc615b"/></g><g id="amber" data-name="Amber"><path d="M432 555c-2 4-19 51-19 54 1 9 30 16 31 39 7-2 54-19 55-21 5-7 0-20-6-25-12-13-28-1-33-21-4-16-9-27-28-26z" fill="#fcbb03" stroke="#fcbb03"/><path d="M647 331l-13 13c19 19 73 68 85 87l13-13z" fill="#fcbb03" stroke="#fcbb03"/><path d="M670 309l-12 12 84 87 13-12z" fill="#fcbb03" stroke="#fcbb03"/></g></svg>

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

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

import EditButtonSvg from "./edit-button.jsx"; // from the React tab above

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