fix: rescope icon identifiers to avoid clashing references across ico…

…ns (#241)

Icons that use internal references of the form `url(#…)` or `xlink:href="#…"` to reference groups or specific elements for stuff like gradients or filters have a high risk of clashing when all inlined in the same document. Also, this kind of reference does not work well with the `<use/>` tag.

This PR will thus handle those icons the same way as styled icons and just inline them instead of adding those to the icon sprite, and we also scope the identifiers to the icon name to avoid clashes.


Fix #235

Test URLs:
- Before: https://main--helix-project-boilerplate--adobe.hlx.page/
- After: https://issue235--helix-project-boilerplate--ramboz.hlx.page/

scripts/lib-franklin.js

@@ -182,9 +182,17 @@ export async function decorateIcons(element) {
           return;
         }
         // Styled icons don't play nice with the sprite approach because of shadow dom isolation
+        // and same for internal references
         const svg = await response.text();
-        if (svg.match(/(<style | class=)/)) {
-          ICONS_CACHE[iconName] = { styled: true, html: svg };
+        if (svg.match(/(<style | class=|url\(#| xlink:href="#)/)) {
+          ICONS_CACHE[iconName] = {
+            styled: true,
+            html: svg
+              // rescope ids and references to avoid clashes across icons;
+              .replaceAll(/ id="([^"]+)"/g, (_, id) => ` id="${iconName}-${id}"`)
+              .replaceAll(/="url\(#([^)]+)\)"/g, (_, id) => `="url(#${iconName}-${id})"`)
+              .replaceAll(/ xlink:href="#([^"]+)"/g, (_, id) => ` xlink:href="#${iconName}-${id}"`),
+          };
         } else {
           ICONS_CACHE[iconName] = {
             html: svg