Strange SVG Component Duplication

Given:

// icons/index.js
export alerts from "./alerts.svg";
export apm from "./apm.svg";
export data from "./data.svg";
export infrastructure from "./infrastructure.svg";
export support from "./support.svg";

// some react component
import * as icons from "./icons/index.js";
//...
class Nav extends React.Component {
  render() {
    return (
      <div>
        {Object.keys(icons).map(k => React.createElement(icons[k], { key: k }))}
      </div>
    )
  }
}

What is rendered is something like: But those should all be different SVGs.

I’m using react@15.5.4, webpack@2.6.1, webpack-dev-server@2.4.5, react-svg-loader@2.0.0-alpha.1.

// webpack.config.js
//...
    module: {
      rules: [
        {
          enforce: "pre",
          test: /\.js$/,
          use: [{ loader: "babel-loader" }],
          include: [/src/],
        },
        {
          test: /\.svg$/,
          use: [
            { loader: "babel-loader" },
            {
              loader: "react-svg-loader",
              query: {
                jsx: true,
                es5: false,
                svgo: {
                  pretty: true,
                  plugins: [{ removeTitle: true }],
                  floatPrecision: 2,
                },
              },
            },
          ],
        },
      ],
    },
//...

[jaisonjjames]

In my case, it was a problem with the SVG icons, icons are duplicated with the ID, I have changed it with a unique id by opening them into an editor.

[and-who]

Workaround, generating unique Ids in the cleanupIDs Plugin of svgo:

      {
        test: /\.svg$/,
        use: [
          {
            loader: "babel-loader"
          },
          {
            loader: "react-svg-loader",
            options: {
              jsx: true,
              svgo: {
                plugins: [
                  { 
                    cleanupIDs: {
                      prefix: {
                        toString() {
                          this.counter = this.counter || 0;
                          return `id-${this.counter++}`;
                        }
                      }
                    }
                  }
                ]
              }
            }
          }
        ]
      }

Found this Solution in this Issue: https://github.com/svg/svgo/issues/674#issuecomment-324193597