Non unique ids cause rendering collisions when svgs are inlined

[vovayatsyuk]

Some flags are corrupted when SVG icons are inlined into the page HTML.

Codepen: https://codepen.io/vovayatsyuk/pen/eYrPXgW?editors=1000

1. At the initial page load, the Honduras flag is corrupted.
2. When changing sort order by clicking on the table header Cameroon and Indian flags get corrupted.

Screenshot:

Possible solution

Use unique ids to prevent collisions. I've already done that in my laravel package

If you are interested in this change I'll open PR with updated icons.

[lipis]

What kind of change is required.. I think we have unique ids everywhere.

[vovayatsyuk]

Here is an example for ag.svg:

@@ -1,10 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ag" viewBox="0 0 512 512">
   <defs>
-    <clipPath id="a">
+    <clipPath id="ag-a">
       <path fill="#25ff01" d="M109 47.6h464.8v464.9H109z"/>
     </clipPath>
   </defs>
-  <g fill-rule="evenodd" clip-path="url(#a)" transform="translate(-120 -52.4) scale(1.1014)">
+  <g fill-rule="evenodd" clip-path="url(#ag-a)" transform="translate(-120 -52.4) scale(1.1014)">
     <path fill="#fff" d="M0 47.6h693V512H0z"/>
     <path d="M1.5 48.2h690.9v196.2H1.5z"/>
     <path fill="#0061ff" d="M128.3 232.1h458.5v103.4H128.3z"/>

[vovayatsyuk]

Here is a script I used to update flags: agatanga/flags#2 (comment)

[NotTsunami]

What kind of change is required.. I think we have unique ids everywhere.

@lipis That was reverted in #1009, perhaps unintentionally?

[kt-jet]

We are running into the same problem. Non-unique ids mess up the flags if you show more than one. A fix would be much appreciated.