hero-icon-js
v1.0.1
Published
Javascript custom element version from heroicons
Downloads
86
Readme
hero-icon-js
Javascript custom element version from heroicons https://heroicons.com/
Usage
1. install
Note: If you intend to use hero-icon-js with a CDN, you can skip this installation step.
npm install hero-icon-js
Or just copyhero-icon-outline.js
or hero-icon-outline.min.js
for outline
variant
andhero-icon-solid.js
or hero-icon-solid.min.js
for solid
variant.
2. Include
Include hero-icon-outline.js
or hero-icon-outline.min.js
for outline
variant or
Include hero-icon-solid.js
or hero-icon-solid.min.js
for solid
variant.
<script src="path/to/hero-icon-outline.js"></script>
<script src="path/to/hero-icon-solid.js"></script>
Or load the script from a CDN provider:
<script src="https://unpkg.com/hero-icon-js/hero-icon-outline.js"></script>
<script src="https://unpkg.com/hero-icon-js/hero-icon-solid.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hero-icon-js/hero-icon-outline.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hero-icon-js/hero-icon-solid.js"></script>
3. Use
To use an icon on your page, add a name
attribute with the icon name to an element:
<hero-icon-outline name="check-circle"></hero-icon-outline>
<hero-icon-solid name="check-circle"></hero-icon-solid>
See the complete list of icons at https://heroicons.com/
You can also add other attributes. Allowed attributes: width
, height
, class
.
<hero-icon-outline name="check-circle" width="48" height="48" class="text-success"></hero-icon-outline>
<hero-icon-solid name="check-circle" width="40" height="40" class="text-success"></hero-icon-solid>
All hero-icon
elements will be replaced with SVG markup corresponding to their name
attribute value.