How to turn an SVG string into an image in a React component?

To turn an SVG string into an image in a React component, we just put the SVG code in a base64 URL string and set that as the value of the src prop of the img element.

For instance, we write

class SomeComponent extends React.Component {
  render() {
    const image =
      '<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="47.4" height="40.65" viewBox="21 18.5 158 135.5"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(128,224,255)" fill-opacity="1" ></path><path d="M25,50 L175,150 M25,150 L175,50" stroke-width="4" stroke="black" fill="black" ></path><g transform="translate(0,0)" stroke-width="4" stroke="black" fill="none" ><circle cx="100" cy="30" r="7.5" fill="black" ></circle><circle cx="70" cy="30" r="7.5" fill="black" ></circle><circle cx="130" cy="30" r="7.5" fill="black" ></circle></g></svg>';
    return (
      <div>
        <img src={`data:image/svg+xml;utf8,${image}`} />
      </div>
    );
  }
}

to put image into the base64 template string.

Then we use the base64 string as the value of the img element src prop.