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>
.
Then you can use the tag svg-icon
in your HTML.
<!-- PNG fallback for old browser --> <!-- sprite SVG is good to go -->
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 browerify
After that, clone this repo to your local machine and cd
to the directory.
cd /path/to/icon-webcomponent
Then run:
npm install
Finally run:
grunt
You will find your custom script in build/
.
Use as a library
You can install this via npm:
npm install icon-webcomponent
Then use it in your own code
var wc = ; var 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