README
<lit-icon>
<lit-icon> is a simple Web Component to display an icon from a set of SVG icons. Inspired by Polymer iron-icon.
Features
- Dependency free
- Really small
Important note
Before including SVG's path into your application, I recommend you take a look at Jake Archibald SVG OMG SVG minification app to reduce the size of your SVG icons.
Installation
$ npm i lit-icon
Import
The lit-icon package comes with 2 custom elements, <lit-icon>, which is the element that display an icon. And <lit-iconset>, in which we will define our SVG icons.
Full import
To import all two classes, just import lit-icon global package :
import 'lit-icon';
Import as you use
You can also only import what you need :
import 'lit-icon/pkg/dist-src/lit-icon.js';
import 'lit-icon/pkg/dist-src/lit-iconset.js';
Usage
NOTE : For great quality icons take a look at these libraries
Know another great icon source ? feel free to submit.
// my-app.js
import { LitElement, html, css } from "lit-element";
import 'lit-icon/pkg/dist-src/lit-icon.js';
import 'lit-icon/pkg/dist-src/lit-iconset.js';
// ...
class MyApp extends LitElement {
render() {
return html`
<lit-icon icon="add" iconset="iconset"></lit-icon>
<lit-iconset iconset="iconset">
<svg><defs>
<g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g>
</defs></svg>
</lit-iconset>
`;
}
}
API
LitIcon
Properties
iconstring
''
The icon to display
iconsetstring
'iconset'
The name the iconset in which look for the icon to display
sizenumber
24
The size of an icon to display
LitIconset
Properties
iconsetstring
'iconset'
The name the iconset in which look for the icon to display