search

shrpne / vue-inline-svg

Dynamically loads an SVG source and inline <svg> element so you can manipulate the style of it
MIT License
177 stars 22 forks source link

Unique id #21

Open mberrg opened 4 years ago

mberrg commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

@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 commented 1 year ago

Here is example of transforming function

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