Deduplicating ids in attributes when multiple instances of the same icon are used on a page

[lolmaus]

Situation

My designer delivers SVG icons which contain ids like id="a" and CSS fill: url(#a);.

Multiple instances of this icon are used on a page. Since HTML assumes ids are unique, the CSS styles of all icon instances reference the id="a" element of the first instance of the icon and not elements belonging to each respective instance.

As a result, when the first icon is removed from the page, the id references in the CSS of all other icons are pointing nowhere, so the styles stop being applied.

I am unable to teach the designer to change the source code of SVGs because they're not a technical person. And I don't want to manually edit all the SVGs that I use because it's tedious, prone to errors and regressions.

This has to be handled programmatically

Minimal reproduction

@lifeart has tossed together a minimal repro on Twiddle:

https://ember-twiddle.com/080585fba8d7d9714ed3c3a1a9c65b96?numColumns=2&openFiles=templates.application%5C.hbs,controllers.application%5C.js

What I've tried:

• cleanupIds with various combinations of options: false, {minify: false} and custom prefix
• prefixIds
• svgo-unique-id

These don't work. I can see applying these cause ids to change, but same ids are still shared across all instances of an icon!

My configuration

(one of the attempts)

    svgJar: {
      strategy: 'inline',
      sourceDirs: ['public/assets/svg'],
      optimizer: {
        svgoModule: require('svgo'),

        plugins: [
          {
            inlineStyles: {
              onlyMatchedOnce: false,
            },
          },
          {
            cleanupIDs: false,
          },
          {
            prefixIds: false,
          },
          {
            uniqueID: require('svgo-unique-id'),
          },
        ],
      },

[KingWu]

Have the same issue

[jherdman]

I think this might be resolved by #186 ...

[jherdman]

Resolved by #222

[evoactivity]

Resolved by #222

I don't think this is closed by my branch, it only deals with the id's for the accessibility elements. This would need to somehow dedupe defined id's in the SVG file used across templates, I don't know that there is a way for this addon to ever deal with that.