❤
npm
Sign UpSign In

icon-webcomponent

0.0.7 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i icon-webcomponent

Repository

github.com/frexy/svg-icon-webcomponent

Homepage

github.com/frexy/svg-icon-webcomponent

Weekly Downloads

19

Version

0.0.7

License

MIT

Last publish

Collaborators

  • chutichhuy
Try on RunKit
Report malware