Heading Underline SVG element, flat

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/22WEt0uBXem6/amnt.svg" alt="Heading Underline" width="48" height="48">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="grape" data-name="Grape"><path d="M114 433h-45v155h45v-51h797v51h44v-155h-44c0 7 2 46-1 50s-52 2-60 2c-38 0-76 0-113 0-75 0-151 0-225 0-75 0-151 0-225 0-38 0-76 0-113 0-8 0-56 2-59-2-3-3-1-43-1-50z" fill="#082c75" stroke="#082c75"/></g><g id="navy" data-name="Navy"><path d="M122 476c0-8 2-47-3-51-4-3-14-1-18-1-9 0-19-1-27 0-4 0-10-1-12 3-3 5-1 73-1 85 0 10-2 78 2 82 3 3 10 2 14 2 57 1 45 6 45-51h781c0 58-12 53 46 51 4 0 9 2 12-1 5-5 2-72 2-83s2-81-1-85-8-3-11-3c-7-1-44-1-47 3s-1 41-1 49zm-8-43c0 7-2 47 1 50 3 4 51 2 59 2 37 0 75 0 113 0 74 0 150 0 225 0 74 0 150 0 225 0 37 0 75 0 113 0 8 0 57 2 60-2s1-43 1-50h44v155h-44v-51h-797v51h-45v-155z" fill="#031635" stroke="#031635"/></g></svg>

.heading-underline {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/22WEt0uBXem6/amnt.svg");
  background-size: contain;
}

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

import HeadingUnderlineSvg from "./heading-underline.jsx"; // from the React tab above

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