title: How to use inline svg in React without colliding id's
body: <p>Is it possible to use inline <em>SVG</em> that is stored in a separate .svg file in React? Classes inside <em>SVG</em> should not be modified and any id's should be changed so that no id collisions occur. </p>
  
  <p>I tried to use <em>svgr</em> library with the following webpack configuration of the <em>svgr</em> library:</p>
  
  <pre><code>  const { relative } = require('path');
    const context = __dirname;
  
    ...
  
    {
      test: /\.svg$/,
      use: ({resource}) =&gt; ({
        loader: '@svgr/webpack',
        options: {
          svgoConfig: {
            plugins: [
              { prefixIds: {
                  prefixIds: true,
                  prefixClassNames: false,
              }},
              { cleanupIDs: {
                  prefix: {
                    toString() {
                      return `_${hash(relative(context, resource))}_`;
                    }
                  },
                  minify: true
              }}
            ]
          }
        }
      }),
    },
  
    ...
  </code></pre>
  
  <p>Example React code:</p>
  
  <pre><code>import Icon from 'icon.svg'
  
  export default () =&gt; &lt;div&gt;
      &lt;Icon /&gt;
      &lt;Icon /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Example icon.svg content:</p>
  
  <pre><code>&lt;svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
  &gt;
    &lt;path
      fill="green"
      class="test_class"
      id="test_id"
      d="M 0 0 C 0 50, 40 20, 100 100 V 0 Z"
    /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Unfortunetally the <em>svgr</em> by default has no concept of "multiple instances of the same <em>SVG</em>"</p>
  
  <p>Above webpack configuration allows to import the same <em>SVG</em> from multiple files and id's inside rendered <em>svg</em> are different each time, because path is different, so appended hash is different too.</p>
  
  <p>The problem is that it doesn't work with many instances of the same component (<code>Icon</code>) and will result in several dom nodes with the same id. The transformed version of "test_id" will be repeated two times in the example above.</p>
  
  <p>I tried to use <em>svg-react-loader</em> library, but it can modify only top-level svg node.</p>
  
  <p>EDIT: i need intact classes, because they are used to access some parts of svg from CSS, for example:
  CSS code:</p>
  
  <pre><code>.imported_svg .test_class {
    background: red;
  }
  </code></pre>