JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

<figure>
<svg viewBox="0 0 64 61" xmlns="http://www.w3.org/2000/svg">
  <path transform="translate(.585 .4)" fill="#F49621" d="M43.08 34.2l3.72-.36 16.44-4.68-5.16-16.2-16.2 5.88-3.24 1.92.84-3.72.6-17.04H23.16l.6 17.04.84 3.72-3.24-1.92-16.08-5.88L0 29.16l16.44 4.68 3.72.36-2.76 2.52L6.84 50.16l13.68 9.96 9.6-14.16 1.56-3.48 1.44 3.48 9.6 14.16 13.68-9.96-10.44-13.44-2.88-2.52z"/>
</svg>
</figure>

CSS

figure {
  width: 40px;
}
svg {
  width: 100%;
}

JavaScript

var unsizedSVGs = document.querySelectorAll("svg");
for (var i = 0; i < unsizedSVGs.length; i++) {
	var el = unsizedSVGs[i];
  var height = el.getBoundingClientRect().y;
  el.setAttribute("height", height + "px");
}