title: Inline SVG in react 16
body: <p>I have a SVG file that I want to use as an icon in my react component. </p>
  
  <pre><code>&lt;svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 409.6 405.76"&gt;&lt;defs&gt;&lt;style&gt;.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}&lt;/style&gt;&lt;clipPath id="clip-path" transform="translate(-478 -181.08)"&gt;&lt;rect class="cls-1" x="478" y="181" width="409.92" height="406.8"/&gt;&lt;/clipPath&gt;&lt;/defs&gt;&lt;title&gt;test&lt;/title&gt;&lt;g class="cls-2"&gt;&lt;path class="ofj" d="M682.8,396.06c50.72,0,91.84-48.13,91.84-107.49,0-82.33-41.12-107.49-91.84-107.49S591,206.24,591,288.57c0,59.36,41.12,107.49,91.84,107.49Zm0,0" transform="translate(-478 -181.08)"/&gt;&lt;path d="M885.6,554.28,839.27,449.9a23.3,23.3,0,0,0-10.48-11.15l-71.91-37.43a4.66,4.66,0,0,0-4.93.41,113.41,113.41,0,0,1-138.3,0,4.67,4.67,0,0,0-4.94-.41l-71.9,37.43a23.24,23.24,0,0,0-10.47,11.15L480,554.28a23.16,23.16,0,0,0,21.18,32.56H864.42a23.17,23.17,0,0,0,21.18-32.56Zm0,0" transform="translate(-478 -181.08)"/&gt;&lt;/g&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>I want to be able to change the fill color dynamically. I've read that it's best to use SVG 'inline' and I tried to reference it with a <code>&lt;use&gt;</code> but it does not work (it's not showing...)</p>
  
  <pre><code>&lt;svg className="icon-avator"&gt;
    &lt;use xlinkHref="./assets/avatar.svg" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>How can I achieve this?</p>