Unique id

[mberrg]

I'm missing an option to prefix id inside the svg with a random string. Conflicting id with multiple SVGs can be a problem, similar tools for react does this.

[shrpne]

Interesting, I have to investigate this. If you have some examples, I will glad to take a look at them.

As a workaround, you can use <vue-inline-svg :id="false"/> to remove root ids and transformSource to update source ids.

[ptsneves]

@shrpne it is quite simple. Each element in svg can have an id, and as a standalone svg it is up to the svg provider to guarantee it is unique in the document.

The problem happens when we use vue-inline-svg to inject and expand the same svg multiple times in the same html multiple times. Then the svg's internal element ids will belong to the whole page document, and if the svg is expanded several times, there will be collisions. Non unique ids are not allowed as per standards.

Edit: I will try my hand on transforming the source svg into having classes with the name of the ids. This way there can be a single css styling applied to all the instances of the svg's inner element in the HTML document @shrpne would you accept a prop where the enables transformation of ids into classes?

[shrpne]

Here is example of transforming function

https://github.com/gilbarbara/react-inlinesvg/blob/main/src/index.tsx#L296