Web component handling Icon System with SVG Sprites
This library provides simple way using icons in svg sprites, just write
<svg-icon use="path/file.svg#icon_name"></svg-icon>into your HTTML file and or
<script>SVGIcon.setAlias("icon", "path/file.svg#")</script>
<svg-icon use="icon-icon_name"></svg-icon>Obviously the Custom Elements (V1) are in game, so you can safely use only in latest version of Firefox/Chrome/Chromium/Edge.
- SVG sprites file can looks like:
<svg>…<defs><svg id="icon_name" …</svg>…</defs></svg>(e.g. icons.svg). - Library and config scripts should be ideally placed before icons will be used (convenient place is
<head>). There are several types of library in bin/ folder. - Web component is now fully functional
- Library expose default styling via css var
var(--svg-icon-size, 1em)andsvg-iconis block element with size of--svg-icon-size - In fact library uses
<svg…<use xlink:href="…"</use></svg>, so you can follow Icon System with SVG Sprites | CSS-Tricks. But, instead of<g>use<svg>(for more freedom – usingviewBox)