chore(release): 1.2.1 [skip ci]

## [1.2.1](v1.2.0...v1.2.1) (2023-09-27)

### Bug Fixes

* revert icons to simple decoration ([#15](#15)) ([17af83b](17af83b))

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.2.1](https://github.com/adobe/aem-lib/compare/v1.2.0...v1.2.1) (2023-09-27)
+
+
+### Bug Fixes
+
+* revert icons to simple decoration ([#15](https://github.com/adobe/aem-lib/issues/15)) ([17af83b](https://github.com/adobe/aem-lib/commit/17af83bf1838cc4b5dfad19c40124c22c70780eb))
+
 # [1.2.0](https://github.com/adobe/aem-lib/compare/v1.1.0...v1.2.0) (2023-09-22)
 
 

dist/aem.js

@@ -392,77 +392,31 @@ function decorateButtons(element) {
   });
 }
 
-const ICONS_CACHE = {};
 /**
- * Replace icons with inline SVG and prefix with codeBasePath.
- * @param {Element} [element] Element containing icons
+ * Add <img> for icon, prefixed with codeBasePath and optional prefix.
+ * @param {span} [element] span element with icon classes
+ * @param {string} [prefix] prefix to be added to icon the src
  */
-async function decorateIcons(element) {
-  // Prepare the inline sprite
-  let svgSprite = document.getElementById('franklin-svg-sprite');
-  if (!svgSprite) {
-    const div = document.createElement('div');
-    div.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none"></svg>';
-    svgSprite = div.firstElementChild;
-    document.body.append(div.firstElementChild);
-  }
+function decorateIcon(span, prefix = '') {
+  const iconName = Array.from(span.classList)
+    .find((c) => c.startsWith('icon-'))
+    .substring(5);
+  const img = document.createElement('img');
+  img.dataset.iconName = iconName;
+  img.src = `${window.codeBasePath}${prefix}/icons/${iconName}.svg`;
+  img.loading = 'lazy';
+  span.append(img);
+}
 
-  // Download all new icons
+/**
+ * Add <img> for icons, prefixed with codeBasePath and optional prefix.
+ * @param {Element} [element] Element containing icons
+ * @param {string} [prefix] prefix to be added to icon the src
+ */
+function decorateIcons(element, prefix = '') {
   const icons = [...element.querySelectorAll('span.icon')];
-  await Promise.all(
-    icons.map(async (span) => {
-      const iconName = Array.from(span.classList)
-        .find((c) => c.startsWith('icon-'))
-        .substring(5);
-      if (!ICONS_CACHE[iconName]) {
-        ICONS_CACHE[iconName] = true;
-        try {
-          const response = await fetch(`${window.hlx.codeBasePath}/icons/${iconName}.svg`);
-          if (!response.ok) {
-            ICONS_CACHE[iconName] = false;
-            return;
-          }
-          // Styled icons don't play nice with the sprite approach because of shadow dom isolation
-          const svg = await response.text();
-          if (svg.match(/(<style | class=)/)) {
-            ICONS_CACHE[iconName] = { styled: true, html: svg };
-          } else {
-            ICONS_CACHE[iconName] = {
-              html: svg
-                .replace('<svg', `<symbol id="icons-sprite-${iconName}"`)
-                .replace(/ width=".*?"/, '')
-                .replace(/ height=".*?"/, '')
-                .replace('</svg>', '</symbol>'),
-            };
-          }
-        } catch (error) {
-          ICONS_CACHE[iconName] = false;
-          // eslint-disable-next-line no-console
-          console.error(error);
-        }
-      }
-    }),
-  );
-
-  const symbols = Object.keys(ICONS_CACHE)
-    .filter((k) => !svgSprite.querySelector(`#icons-sprite-${k}`))
-    .map((k) => ICONS_CACHE[k])
-    .filter((v) => !v.styled)
-    .map((v) => v.html)
-    .join('\n');
-  svgSprite.innerHTML += symbols;
-
   icons.forEach((span) => {
-    const iconName = Array.from(span.classList)
-      .find((c) => c.startsWith('icon-'))
-      .substring(5);
-    const parent = span.firstElementChild?.tagName === 'A' ? span.firstElementChild : span;
-    // Styled icons need to be inlined as-is, while unstyled ones can leverage the sprite
-    if (ICONS_CACHE[iconName].styled) {
-      parent.innerHTML = ICONS_CACHE[iconName].html;
-    } else {
-      parent.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-${iconName}"/></svg>`;
-    }
+    decorateIcon(span, prefix);
   });
 }
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adobe/aem-lib",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "AEM Library",
   "type": "module",
   "scripts": {