React rendering SVG overwrites other SVGs on the page

It would be helpful to see the other SVGs as well, but if they are similar and the id's match, then this is your problem.

    <path id="4eeded6c-befb-41ba-a055-83a9e4ddc009" d="M3.632 3.182H1.091A1.09 1.09 0 0 1 1.09 1h3.322c.467 0 .883.297 1.033.74l4.096 12.046.036.134c.083.406.53.777.928.78l8.87.056c.39.002.831-.361.925-.816l1.552-6.017a1.09 1.09 0 1 1 2.112.545l-1.539 5.96c-.285 1.417-1.625 2.518-3.064 2.51l-8.869-.057c-1.408-.008-2.718-1.073-3.036-2.451L3.632 3.182zM9.272 23a2.191 2.191 0 0 1-2.181-2.201c0-1.216.977-2.2 2.182-2.2s2.181.984 2.181 2.2A2.191 2.191 0 0 1 9.273 23zm10.91 0A2.191 2.191 0 0 1 18 20.799c0-1.216.977-2.2 2.182-2.2s2.181.984 2.181 2.2A2.191 2.191 0 0 1 20.182 23z"/>

You can see that this id get's targetted and reused within the SVG itself here:

    <use xlink:href="#4eeded6c-befb-41ba-a055-83a9e4ddc009"/>

This is a common problem, especially when exporting from apps like photoshop etc. To avoid conflicts when i use svg's I manually change all id's to ensure uniqueness.

If it helps, I've created a code-pen which goes into more examples of how to re-use svg's : https://codepen.io/peter-mouland/pen/JErvZY

You should to assign different id to each svg icon in your config file. Like this:

// SVG are imported as react components  {    test: /\.svg$/,    use: [      {        loader: 'babel-loader',      },      {        loader: 'react-svg-loader',        options: {          svgo: {            plugins: [              {                removeTitle: true,              },              {cleanupIDs: {                  prefix: {                      toString() {                          this.counter = this.counter || 0;                          return `id-${this.counter++}`;                      }                  }              }},            ],            floatPrecision: 3,          },        },      },    ],    include: paths.svg,  },

The issue can be related to the non-unique ids in SVGs.

It is common that svg generators can return content with the same Ids like <mask id="mask0" /> which then is referenced by <g mask="url(#mask0)"/>.

In case you have two different SVGs with the same mask id you will likely to have an issue with rendering two different icons.

The simplest solution is to specify a unique id for each <mask /> and then don't forget to update the reference in <g />.