All dependencies are handled internally by the component with one exception - the Web Components polyfills for Custom Elements. Keep in mind that this polyfill will need to load BEFORE other related assets so add it in the head of the document and as close to the opening of the head tag as possible.
<script async src='https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.1.0/custom-elements.min.js' ></script>No build necessary. No complexities. Just add this script to the head of your HTML document below the Custom Elements polyfill.
When you want to use it simply add it to your markup
<img-icon></img-icon> |
 |
 |
 |
 |
|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
| Attribute Name | Required | Type | Example | Comments |
|---|---|---|---|---|
| fill | No | integer | 70 | fill is a number from 0 to 100 which is an integer representation of the color fill percentage |
| shape | No | string | "menu" | This attribute isthe name of the svg path used to create the icon |
| name | description | method type | usage | returns |
|---|---|---|---|---|
| shapes | 'shapes' returns an array of all the possible shape names | instance | document.querySelector('img-icon').shapes |
array |
| shape | 'shape' returns the current shape value | instance | document.querySelector('img-icon').shape |
string |
| fill | 'fill' returns the integer representation of the icon fill | instance | document.querySelector('img-icon').fill |
number |
TODO
To contribute to this project all you will need is NPM installed and a love of web components. Please submit any suggestions or changes with a pull request (when possible). Here is the Code of Conduct for contributions