Description

Dependencies

---

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>

Usage and Limitations

---

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>

Browser Support

---

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

API

---

Attributes

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

Methods

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

Events

---

fillUpdated (TODO)

shapeUpdated (TODO)

Demos

---

TODO

Contributing

---

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