icon-webcomponent
v0.0.7
Published
Web component for SVG icons
Downloads
15
Readme
SVG Icon Web Component
A small web component for SVG icon, supporting sprite, CSS styling, bitmap fallback.
Usage
The browser-side script is available in build folder.
Put this in your <head>.
<script type="text/javascript" src="iconwc.js"></script>Then you can use the tag svg-icon in your HTML.
<svg-icon>
<src href="cow.svg" />
<src href="cow.png" /> <!-- PNG fallback for old browser -->
</svg-icon>
<svg-icon>
<src href="sprite.svg#cow" /> <!-- sprite SVG is good to go -->
</svg-icon>Browser support
Works fine with IE9, latest Chrome, Safari and Firefox Nightly.
There's no SVG support on IE 8, so you need to declare a <src> element which points to a PNG file as a fallback.
Custom tag name
If you want another tag name, it's easy to build the script yourself.
The tag name is specified in entry.js:
let tagName = "someother-tagnameyoureallylike";Then install Node.js and browserify and babel and grunt:
npm install -g babel
npm install -g browerifyAfter that, clone this repo to your local machine and cd to the directory.
cd /path/to/icon-webcomponentThen run:
npm installFinally run:
gruntYou will find your custom script in build/.
Use as a library
You can install this via npm:
npm install icon-webcomponentThen use it in your own code
var wc = require("icon-webcomponent");
var fn = wc("your-tagname");
fn();Attention please
By standard, your custom tag name must have a dash in it. tag-name is valid, but tagname is not.
License
MIT