Text Bubble SVG element, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="sky" data-name="Sky"><path d="M262 171c-71 5-133 57-150 127-7 31-4 65-4 97 0 31 0 64 0 96 0 20-2 42 1 62 7 55 41 101 89 127 7 3 13 6 15 14 4 21-31 101-32 129 0 9 3 16 13 14 7-2 78-62 90-71 13-11 76-64 86-68 10-3 22-1 33-1 62 0 125 0 188 0 37 0 74 0 112 0 23 0 48 2 71-1 48-7 91-35 117-76 10-16 18-35 22-55 7-38 3-80 3-119 0-40 2-80 0-119-1-16-4-33-10-48-19-54-69-97-127-106-44-7-96-2-141-2-83 0-167 0-249 0-43 0-85-2-127 0zm2 118c27-4 63 0 91 0 69 0 139 0 209 0 50 0 100 0 150 0 19 0 51-7 64 10 15 17 4 42-18 45-29 4-61 0-90 0-70 0-140 0-209 0-50 0-100 0-150 0-19 0-53 7-66-10-14-17-2-42 19-45zm0 115c26-4 62 0 90 0 70 0 140 0 211 0 50 0 100 0 150 0 19 0 50-7 64 11 14 17 2 41-19 44-28 5-63 1-91 1-70 0-140 0-209 0-50 0-100 0-150 0-19 0-51 6-65-11s-2-42 19-45zm-3 116c19-3 61 0 83 0 72 0 144 0 217 0 50 0 100 0 150 0 19 0 51-7 66 9 15 14 8 42-14 46-19 3-61 0-82 0-73 0-145 0-217 0-50 0-100 0-150 0-18 0-55 5-67-8-15-15-7-43 14-47z" fill="#6bc3fb" stroke="#6bc3fb"/></g><g id="grape" data-name="Grape"><path d="M254 139c-78 7-146 62-169 136-10 30-11 63-10 94 2 41 0 83 1 125 0 19-1 38 0 57 4 56 35 107 78 140 4 3 21 13 22 15 3 6-10 44-12 52-6 24-22 61-14 83 4 10 12 19 21 24 37 18 75-27 102-49 15-11 99-82 107-85 4-2 7-2 11-2 21-2 44 0 66 0 46 0 92 0 139 0 36 0 74 0 111 0 20 0 42 1 62 0 60-4 117-39 149-89 13-22 24-47 28-73 5-33 2-68 2-101 0-61 9-134-9-192-22-71-87-124-161-134-37-5-77-1-114-1-93 0-184 0-276 0-45 0-90-3-134 0zm8 32c42-2 84 0 127 0 82 0 166 0 249 0 45 0 97-5 141 2 58 9 108 52 127 106 6 15 9 32 10 48 2 39 0 79 0 119 0 39 4 81-3 119-4 20-12 39-22 55-26 41-69 69-117 76-23 3-48 1-71 1-38 0-75 0-112 0-63 0-126 0-188 0-11 0-23-2-33 1-10 4-73 57-86 68-12 9-83 69-90 71-10 2-13-5-13-14 1-28 36-108 32-129-2-8-8-11-15-14-48-26-82-72-89-127-3-20-1-42-1-62 0-32 0-65 0-96 0-32-3-66 4-97 17-70 79-122 150-127z" fill="#062665" stroke="#062665"/></g><g id="white" data-name="White"><path d="M264 404c-21 3-33 28-19 45s46 11 65 11c50 0 100 0 150 0 69 0 139 0 209 0 28 0 63 4 91-1 21-3 33-27 19-44-14-18-45-11-64-11-50 0-100 0-150 0-71 0-141 0-211 0-28 0-64-4-90 0z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M261 520c-21 4-29 32-14 47 12 13 49 8 67 8 50 0 100 0 150 0 72 0 144 0 217 0 21 0 63 3 82 0 22-4 29-32 14-46-15-16-47-9-66-9-50 0-100 0-150 0-73 0-145 0-217 0-22 0-64-3-83 0z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M264 289c-21 3-33 28-19 45 13 17 47 10 66 10 50 0 100 0 150 0 69 0 139 0 209 0 29 0 61 4 90 0 22-3 33-28 18-45-13-17-45-10-64-10-50 0-100 0-150 0-70 0-140 0-209 0-28 0-64-4-91 0z" fill="#fcfcfc" stroke="#fcfcfc"/></g></svg>

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

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

import TextBubbleSvg from "./text-bubble.jsx"; // from the React tab above

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