-
Notifications
You must be signed in to change notification settings - Fork 10
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
+195
−1
Closed
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
41ac7f1
OEL-2799: POC svg sprite css classes.
tibi2303 c91e486
Merge branch 'development' into OEL-2799
tibi2303 13ed1e8
OEL-2799: Added icon classes.
tibi2303 86de5fb
OEL-2799: Fixed deploy demo.
tibi2303 e7531fc
OEL-2799: Improved demo.
tibi2303 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
105 changes: 105 additions & 0 deletions
105
src/compositions/bcl-icons-list/icons-manager.html.twig
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 %} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.