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 in PascalCase (e.g: 20/solid/AcademicCap.js) and are self-registered in kebab-case with a hi prefix, e.g: hi-20-solid-academic-cap.

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/24/outline/ShoppingCart";

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	~500B	~2800B	~830B	~770B
gzip	~360B	~1200B	~510B	~490B
brotli	~270B	~1040B	~410B	~390B

Package Structure

heroicons-wc
├── 16
│   └── solid
│       ├── AcademicCap.js
│       ├── AcademicCap.d.ts
│       └── ...
├── 20
│   └── solid
│       ├── AcademicCap.js
│       ├── AcademicCap.d.ts
│       └── ...
└── 24
    ├── outline
    │   ├── AcademicCap.js
    │   ├── AcademicCap.d.ts
    │   └── ...
    └── solid
        ├── AcademicCap.js
        ├── AcademicCap.d.ts
        └── ...

License

This package (not the icons) is MIT licensed.