Skip to content

OEL-2799: Svg sprite css attributes. #576

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion builder/scripts/sprite.js
Original file line number Diff line number Diff line change
@@ -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);
});
});
});
7 changes: 7 additions & 0 deletions src/compositions/bcl-icons-list/icons-list.story.js
Original file line number Diff line number Diff line change
@@ -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];
105 changes: 105 additions & 0 deletions src/compositions/bcl-icons-list/icons-manager.html.twig
Original file line number Diff line number Diff line change
@@ -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 %}
37 changes: 37 additions & 0 deletions src/themes/default/src/js/icon-manager/icon-manager.js
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 2 additions & 0 deletions src/themes/default/src/js/index.esm.js
Original file line number Diff line number Diff line change
@@ -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,
};
2 changes: 2 additions & 0 deletions src/themes/default/src/js/index.umd.js
Original file line number Diff line number Diff line change
@@ -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,
};
16 changes: 16 additions & 0 deletions src/themes/default/src/scss/_icon_manager.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
1 change: 1 addition & 0 deletions src/themes/default/src/scss/oe-bcl-default.scss
Original file line number Diff line number Diff line change
@@ -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";
9 changes: 9 additions & 0 deletions tools/story-utils/index.js
Original file line number Diff line number Diff line change
@@ -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 `