1.0.0 • Published 7 years ago
flinbu-svg-icons v1.0.0
svg-icons
SVG Icons class to get svg icons in html
Usage
Call svg-icons.js (.min included) in your html
<script src="path/to/js/svg-icons.js"></script>
Call initiate SVG Icons in your js file
var svgIcon = new SVGIcons();
svgIcons.load();
By default, the icons path is set to the root directory (./icons), but you can set you own path. You can recall the method when new elements are added to DOM.
var svgIcons = new SVGIcons('path/to/icons');
svgIcons.load();
On HTML
Now, you need to set the icon for an element, just use the data-icon attribute in the HTML element. Just submit the filename of the SVG file without extension
<span data-icon="{{filename}}"></span>
// Example for print.svg file
<span data-icon="print"></span>
SVG code will be placed inside this tag and the class 'svg-icon' and '{{filename}}-icon' (print-icon in the example). The result looks like
<span data-icon="print" class="svg-icon print-icon">
<svg>
...
</span>
The icons used to dev are from Byte Size Icons from @danklammer
1.0.0
7 years ago