title: Turning an SVG string into an image in a React component
body: <p>I have a dynamically generated SVG string in a React component. I want to embed this as an image in the component. Currently, I'm using something along the lines of:</p>
  
  <pre><code>class SomeComponent extends React.Component {
      render() {
          var image = '&lt;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"&gt;&lt;path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(128,224,255)" fill-opacity="1" &gt;&lt;/path&gt;&lt;path d="M25,50 L175,150 M25,150 L175,50" stroke-width="4" stroke="black" fill="black" &gt;&lt;/path&gt;&lt;g transform="translate(0,0)" stroke-width="4" stroke="black" fill="none" &gt;&lt;circle cx="100" cy="30" r="7.5" fill="black" &gt;&lt;/circle&gt;&lt;circle cx="70" cy="30" r="7.5" fill="black" &gt;&lt;/circle&gt;&lt;circle cx="130" cy="30" r="7.5" fill="black" &gt;&lt;/circle&gt;&lt;/g&gt;&lt;/svg&gt;';
          return (
              &lt;div dangerouslySetInnerHTML={{ __html: image }} /&gt;
          )
      }
  }
  </code></pre>
  
  <p>However using a property called <code>dangerouslySetInnerHTML</code> makes me pretty uneasy. Is there a more generally accepted (and safer) way to do this?</p>