OEL-2799: Svg sprite css attributes.

builder/scripts/sprite.js

@@ -30,6 +30,15 @@ const path = require("path");
 const defaultPlugins = require("../conf/svgoDefaultPlugins");
 const SVGSpriter = require("svg-sprite");
 
+let svgMarkup;
+
+const addSvgMarkup = (filePath) => {
+  const fileContents = fs.readFileSync(filePath, { encoding: "utf-8" });
+  svgMarkup = svgMarkup += "</svg>"; // Closing svg tag.
+  const updatedContents = fileContents.replace("</svg>", svgMarkup);
+  fs.writeFileSync(filePath, updatedContents);
+};
+
 module.exports = (entry, dest, options) => {
   const iconList = Array.isArray(options.list)
     ? options.list.flat(1)
@@ -64,7 +73,7 @@ module.exports = (entry, dest, options) => {
       },
     },
   });
-
+  let svgYPosition = 0;
   files.forEach((file) => {
     let filePath;
     if (Array.isArray(entry)) {
@@ -75,6 +84,10 @@ module.exports = (entry, dest, options) => {
     } else {
       filePath = path.resolve(entry, file);
     }
+    const id = path.basename(file, path.extname(file)); // Extracting file name without extension as id
+    svgMarkup =
+      svgMarkup += `<view id="${id}-view" viewBox="0 ${svgYPosition} 16 16"/><use xlink:href="#${id}" width="16" height="16" x="0" y="${svgYPosition}" id="${id}-use"/>`;
+    svgYPosition = svgYPosition + 16;
     spriter.add(
       filePath,
       file,
@@ -90,6 +103,8 @@ module.exports = (entry, dest, options) => {
           result[mode][resource].path,
           result[mode][resource].contents
         );
+        const outputPath = result[mode][resource].path;
+        addSvgMarkup(outputPath);
       });
     });
   });

src/compositions/bcl-icons-list/icons-list.story.js

@@ -1,7 +1,9 @@
 import icons_list from "@openeuropa/bcl-icons-list/icons-list.html.twig";
+import icons_manager from "@openeuropa/bcl-icons-list/icons-manager.html.twig";
 import icons from "@openeuropa/bcl-theme-default/src/icons/icons";
 import customIcons from "@openeuropa/bcl-theme-default/src/icons/custom-icons";
 import defaultSprite from "@openeuropa/bcl-theme-default/icons/bcl-default-icons.svg";
+import { addIconPath } from "@openeuropa/bcl-story-utils";
 
 let iconsList = icons.concat(customIcons);
 iconsList = iconsList.map((icon) => icon.substring(0, icon.length - 4));
@@ -17,3 +19,8 @@ export default {
 
 export const Default = () =>
   icons_list({ icons: iconsList, path: defaultSprite });
+
+export const Attribute = () =>
+  icons_manager({ icons: iconsList, path: defaultSprite });
+
+Attribute.decorators = [addIconPath];

src/compositions/bcl-icons-list/icons-manager.html.twig

@@ -0,0 +1,105 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - icons: (icon[]) (default: [])
+  - path (string) (default: '')
+#}
+
+{% set _icons = icons|default([]) %}
+{% set _path = path|default('') %}
+
+{% if _icons is not empty and _icons is iterable %}
+  <div class="px-4">
+    <div class="row">
+      <h3 class="mt-4"> Icon Colours </h3>
+      <div class="px-2 my-5 col">
+        <span class="icon mx-auto icon-xl" data-icon="arrow-clockwise"></span>
+        <p class="text-center text-nowrap">Default</p>
+      </div>
+      <div class="px-2 my-5 col">
+        <span class="icon mx-auto icon-xl icon-color-primary" data-icon="arrow-clockwise"></span>
+        <p class="text-center text-nowrap">Primary<br><b>icon-color-primary</b></p>
+      </div>
+      <div class="px-2 my-5 col">
+        <span class="icon mx-auto icon-xl icon-color-secondary" data-icon="arrow-clockwise"></span>
+        <p class="text-center text-nowrap">Secondary<br><b>icon-color-secondary</b></p>
+      </div>
+      <div class="px-2 my-5 col">
+        <span class="icon mx-auto icon-xl icon-color-success" data-icon="arrow-clockwise"></span>
+        <p class="text-center text-nowrap">Success<br><b>icon-color-success</b></p>
+      </div>
+      <div class="px-2 my-5 col">
+        <span class="icon mx-auto icon-xl icon-color-info" data-icon="arrow-clockwise"></span>
+        <p class="text-center text-nowrap">Info<br><b>icon-color-info</b></p>
+      </div>
+      <div class="px-2 my-5 col">
+        <span class="icon mx-auto icon-xl icon-color-warning" data-icon="arrow-clockwise"></span>
+        <p class="text-center text-nowrap">Warning<br><b>icon-color-warning</b></p>
+      </div>
+      <div class="px-2 my-5 col">
+        <span class="icon mx-auto icon-xl icon-color-danger" data-icon="arrow-clockwise"></span>
+        <p class="text-center text-nowrap">Danger<br><b>icon-color-danger</b></p>
+      </div>
+      <div class="px-2 my-5 col">
+        <span class="icon mx-auto icon-xl icon-color-dark" data-icon="arrow-clockwise"></span>
+        <p class="text-center text-nowrap">Dark<br><b>icon-color-dark</b></p>
+      </div>
+      <div class="px-2 my-5 col text-center">
+        <div class="p-3 bg-dark d-inline-block">
+          <span class="icon mx-auto icon-xl icon-color-light" data-icon="arrow-clockwise"></span>
+        </div>
+        <p class="text-center text-nowrap">Light<br><b>icon-color-light</b></p>
+      </div>
+    <div>
+    <div class="row">
+      <h3 class="mt-4"> Icon Sizes </h3>
+      <div class="row">
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--2xs" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">2XS - <b>icon--2xs</b></p>
+        </div>
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--xs" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">XS - <b>icon--xs</b></p>
+        </div>
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--s" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">S - <b>icon--s</b></p>
+        </div>
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--m" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">M - <b>icon--m</b></p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--l" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">L - <b>icon--l</b></p>
+        </div>
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--xl" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">XL - <b>icon--xl</b></p>
+        </div>
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--2xl" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">2XL - <b>icon--2xl</b></p>
+        </div>
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon--fluid" data-icon="arrow-clockwise"></span>
+          <p class="text-center text-nowrap">Fluid - <b>icon--fluid</b></p>
+        </div>
+      </div>
+    <div>
+    <div class="row">
+      <h3>Icons List</h3>
+      {% for _icon in _icons %}
+        <div class="px-3 my-5 col">
+          <span class="icon mx-auto icon-xl" data-icon="{{ _icon }}"></span>
+          <p class="text-center text-nowrap">{{ _icon }}</p>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+{% endif %}
+
+{% endapply %}

src/themes/default/src/js/icon-manager/icon-manager.js

@@ -0,0 +1,37 @@
+/**
+ * --------------------------------------------------------------------------
+ * IconManager Class Documentation
+ * --------------------------------------------------------------------------
+ *
+ * Overview:
+ * The `IconManager` class is a utility for dynamically setting the `mask-image`
+ * of HTML elements based on custom data attributes. It uses CSS custom properties
+ * and JavaScript to ensure the correct SVG icon is applied to elements with the class `.icon`.
+ *
+ */
+
+import { defineJQueryPlugin } from '@openeuropa/bcl-bootstrap/js/src/util/index'
+
+class IconManager {
+  initializeIcons() {
+    this.iconPath = getComputedStyle(document.body).getPropertyValue('--icon-path').trim().replace(/['"]/g, '');
+    document.querySelectorAll('.icon[data-icon]').forEach(icon => {
+      const iconId = icon.getAttribute('data-icon');
+      this.setIconMask(icon, iconId);
+    });
+  }
+
+  setIconMask(icon, iconId) {
+    icon.style.maskImage = `url(${this.iconPath}#${iconId}-view)`;
+    icon.style.webkitMaskImage = `url(${this.iconPath}#${iconId}-view)`;
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const iconManager = new IconManager();
+  iconManager.initializeIcons();
+});
+
+defineJQueryPlugin(IconManager);
+
+export default IconManager;

src/themes/default/src/js/index.esm.js

@@ -19,6 +19,7 @@ import ScrollSpy from "@openeuropa/bcl-bootstrap/js/src/scrollspy-legacy";
 import Tab from "@openeuropa/bcl-bootstrap/js/src/tab";
 import Toast from "@openeuropa/bcl-bootstrap/js/src/toast";
 import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
+import IconManager from "@openeuropa/bcl-theme-default/src/js/icon-manager/icon-manager";
 
 export {
   Alert,
@@ -35,4 +36,5 @@ export {
   Tab,
   Toast,
   Tooltip,
+  IconManager,
 };

src/themes/default/src/js/index.umd.js

@@ -19,6 +19,7 @@ import ScrollSpy from "@openeuropa/bcl-bootstrap/js/src/scrollspy-legacy";
 import Tab from "@openeuropa/bcl-bootstrap/js/src/tab";
 import Toast from "@openeuropa/bcl-bootstrap/js/src/toast";
 import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
+import IconManager from "@openeuropa/bcl-theme-default/src/js/icon-manager/icon-manager";
 
 export default {
   Alert,
@@ -35,4 +36,5 @@ export default {
   Tab,
   Toast,
   Tooltip,
+  IconManager,
 };

src/themes/default/src/scss/_icon_manager.scss

@@ -0,0 +1,16 @@
+.icon {
+  width: 1em;
+  height: 1em;
+  display: block;
+  background-color: var(--bs-dark);
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+@each $color, $value in $theme-colors {
+  .icon-color-#{$color} {
+    background-color: $value;
+  }
+}

src/themes/default/src/scss/oe-bcl-default.scss

@@ -67,6 +67,7 @@
 @import "@openeuropa/bcl-theme-default/src/scss/header";
 @import "@openeuropa/bcl-theme-default/src/scss/footer";
 @import "@openeuropa/bcl-theme-default/src/scss/tabs";
+@import "@openeuropa/bcl-theme-default/src/scss/icon_manager";
 @import "@openeuropa/bcl-theme-default/src/scss/icon";
 @import "@openeuropa/bcl-theme-default/src/scss/search-form";
 @import "@openeuropa/bcl-theme-default/src/scss/input";

tools/story-utils/index.js

@@ -342,6 +342,15 @@ export const initScrollspy = (story) => {
   ${demo}`;
 };
 
+export const addIconPath = (story) => {
+  const demo = story();
+  return `
+    <script>
+      document.body.style.setProperty('--icon-path', '${iconPath}');
+    </script>
+  ${demo}`;
+};
+
 export const initBadges = (story) => {
   const demo = story();
   return `