malobre/heroicons-wc

Heroicons as web components

Heroicons as Web Components

This package consist of a build script that generate web components for every heroicon.

Once generated, icon components are stored in individual files, with the following naming scheme: hi-<SIZE>-<NAME>.js, e.g: hi-20-solid-academic-cap.js, and are self-registered.

Installation

1. Clone repo
2. npm pack
3. Move artifact to your project (e.g: in a vendor directory)
4. Install (e.g: npm i vendor/heroicons-wc-x.x.x.tgz)

Usage

1. Import the icon:

   import "heroicons-wc/hi-24-outline-shopping-cart.js";

2. Use it like any html element:

   <hi-24-outline-shopping-cart></hi-24-outline-shopping-cart>

Typescript

The build script also generate declaration files for every component.

Files sizes

The generated files are not minified, but they are still lightweight:

compression	min	max	average	median
raw	~605B	~3089B	~1008B	~950B
gzip	~418B	~1300B	~594B	~575B
brotli	~299B	~1081B	~462B	~448B

Package Structure

heroicons-wc
├── hi-16-solid-academic-cap.js
├── hi-16-solid-academic-cap.d.ts
└── ...

License

This package (not the icons) is MIT licensed.

heroicons-wc's Issues

Publish the package to the NPM registry

Hi, nice implementation.

I did not yet find another library that delivers the heroicons as webcomponents. And since we use these already it would be very beneficial to install them from NPM.