Issue with minifying IDs

[hansonrb]

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?

[a-ignatov-parc]

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

[iyakd]

Hi @a-ignatov-parc 😉

I have problem with SVGO version, for adding prefixIds support.

Commit with update to [email protected] was created on 8 Feb 2018, but last realease v2.1.0 was on 13 Oct 2017.

If I add react-svg-loader --latest or v2.2.0-alpha* to my project SVGO version define as ^0.7.2.

How I can get latest or canary release with "svgo": "^1.0.4"? Thanks.

[a-ignatov-parc]

@iyakd you should add it as react-svg-loader@canary.

npm i react-svg-loader@canary

[iyakd]

Unfortunately, that install latest v2.2.0-alpha*, but that version include "svgo": "^0.7.2" too.

[a-ignatov-parc]

It's strange... react-svg-loader@canary is resolving to 2.2.0-alpha.90436959 and it depends on react-svg-core@^2.2.0-alpha.90436959. But instead 2.2.0-alpha.90436959 npm installs 2.2.0-nightly.58aa6b3c 🤔

[chrisfinch]

For anyone coming here still looking for a solution, here's what worked for me using [email protected] 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))}`,
								}
							}
						]
					}
				}
			}
		]
	)
}

[jt3k]

plz fix tabs )

[TrebuhD]

Can this be solved in .babelrc.js, which AFAIK doesn't provide access to the file path?