A web component for SVG icon
JavaScript HTML
Permalink
Failed to load latest commit information.
build disable shadow dom until a good solution for CSS Jul 17, 2015
lib
src disable shadow dom until a good solution for CSS Jul 17, 2015
test disable shadow dom until a good solution for CSS Jul 17, 2015
.gitignore disable shadow dom until a good solution for CSS Jul 17, 2015
Gruntfile.js
README.md Readme Jul 1, 2015
entry.js
package.json version number Jul 13, 2015

README.md

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 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 = 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