title: React rendering SVG overwrites other SVGs on the page
body: <p>Using <code>babel-plugin-inline-react-svg</code> from within my <code>next.js</code> app, I'm importing some SVGs into my React <code>v16.0.0</code> component like so.</p>
  
  <pre><code>import React from 'react';
  import Close from './close.svg';
  import Chevron from './right.svg';
  import EmptyCart from './empty.svg';
  
  const Component = props =&gt; (
    &lt;div&gt;
      &lt;Close /&gt;
      &lt;EmptyCart /&gt;
      &lt;Chevron /&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>When I run that code, the page is rendered with the 3 SVGs all being the same, like this:</p>
  
  <p><a href="https://i.stack.imgur.com/eqnhF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eqnhF.png" alt="duplicated SVGs"></a></p>
  
  <p>Whichever of the SVGs I render first seems to take over all of the other ones. If I put <code>&lt;EmptyCart /&gt;</code> first, they'll all be cart icons. But here's the real kicker: When I inspect the DOM, the SVGs seem to all be correct (they're all completely different from each other).</p>
  
  <p>Anyone seen this before? How is this even possible for the DOM to say one thing but the browser to render another thing?</p>