Issue with minifying IDs

When I have several Svgs on one page, due to ID minification, all icons looks same with first icons

I tried to disable cleanupIDs, but it doesn’t work. Even removeTitle doesn’t work

{
  test: /.\inline\.svg$/,
  use: [
    {
      loader: require.resolve('babel-loader'),
    },
    {
      loader: require.resolve('react-svg-loader'),
      options: {
        svgo: {
          plugins: [
            {
              removeTitle: true,
              cleanupIDs: false,
            },
          ],
          floatPrecision: 2,
        },
      },
    },
  ],
},

<svg width="31px" height="31px" viewBox="0 0 31 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
    <title>1px/add</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M16,15 L22,15 C22.2761424,15 22.5,15.2238576 22.5,15.5 C22.5,15.7761424 22.2761424,16 22,16 L16,16 L16,22 C16,22.2761424 15.7761424,22.5 15.5,22.5 C15.2238576,22.5 15,22.2761424 15,22 L15,16 L9,16 C8.72385763,16 8.5,15.7761424 8.5,15.5 C8.5,15.2238576 8.72385763,15 9,15 L15,15 L15,9 C15,8.72385763 15.2238576,8.5 15.5,8.5 C15.7761424,8.5 16,8.72385763 16,9 L16,15 Z" id="path-1"></path>
    </defs>
    <g id="1px/add" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <mask id="mask-2" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
        <use id="add" fill="#979797" fill-rule="nonzero" xlink:href="#path-1"></use>
        <g id="Color/02-Slate" mask="url(#mask-2)" fill="#586271">
            <polygon id="Rectangle-Copy" points="0 0 31 0 31 31 0 31"></polygon>
        </g>
    </g>
</svg>

Here’s my svg file, All #path-1 are converted into ‘#a’ for all svg So, all following icons are pointing first one with #a and looking same.

Any idea and solution?

[chrisfinch]

For anyone coming here still looking for a solution, here’s what worked for me using react-svg-loader@2.1.0 and webpack 4.

const hash = require('string-hash');
const {relative} = require('path');
// ...
{
	test: /\.svg$/,
	include: path.resolve(__dirname, 'src'),
	use: ({resource}) => (
		[
			{
				loader: 'babel-loader?cacheDirectory'
			},
			{
				loader: 'react-svg-loader',
				options: {
					svgo: {
						plugins: [
							{
								cleanupIDs: {
									prefix: `svg${hash(relative(__dirname, resource))}`,
								}
							}
						]
					}
				}
			}
		]
	)
}

[a-ignatov-parc]

svgo supports prefixIds plugin starting from 1.x. You can switch to canary release and use it to prefix ids 😉