Exclusive SVG Set
Guidance and suggestions for using our exclusive SVG set of icon libraries.
Overview
Front icons are designed exclusively designed on top of premium icon set to make Front pages unique, which means that these icons are only available in the Front Template. This set of icons include more than 60 customized icons and counting.
Icons can be found in assets/svg/icons/
How to use?
Copy-paste the following <script>s near the end of your pages under JS Implementing Plugins to enable them.
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/js/components/hs.svg-injector.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
There are two ways to use SVG icons in Front:
1. Traditional way
Pros - Fast loading
Cons - Colors must be modified with Illustrator tools
<img src="../../assets/svg/icons/icon-1.svg" alt="SVG">
2. Through Embedded JavaScript
Pros - Colors can be controlled via variables
Cons - Uses JavaScript
<figure id="embedIcon" class="svg-preloader">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-1.svg" alt="SVG" data-parent="#embedIcon">
</figure>
Front follows the second method as it gives more flexibility when modifying the colors.
