preact-heroicons
v2.2.0
Published
Heroicons as Preact components
Downloads
112
Readme
Preact Heroicons
A set of free MIT-licensed high-quality SVG icons for you to use in your web projects.
This package wraps up all of the wonderful Heroicons into Preact components, with appropriate TypeScript typings. This package is fully treeshakable, so each icon imported is just 200 bytes gzipped! That's practically free!!!
Note: The official Heroicons package is here. These work well, but will have conflicts when using Preact and TypeScript.
This package will version match the official Heroicons
package and documentation. Preact Heroicons
specific patches will be handled as rc
releases one patch version ahead of the official package.
Previewing the Icons
Preview the icons at heroicons.com.
Installation & Usage
First, install this library with your package manager of choice!
npm add preact-heroicons
pnpm add preact-heroicons
yarn add preact-heroicons
bun install preact-heroicons
deno add npm:preact-heroicons
Now you have access to the entire heroicons
library! They are formatted as pascal case and have Solid
(solid format) or Outline
(outline format) appended at the end based on type.
Mini Icons (Heroicons v2.0) are accessible by appending MiniSolid
to the name provided on HeroIcons.
import { ArchiveBoxSolid } from "preact-heroicons";
import { ArchiveBoxOutline } from "preact-heroicons";
import { ArchiveBoxMiniSolid } from "preact-heroicons";
export const SomeComponent = () => {
return (
...
<ArchiveBoxSolid className="h-6 w-6 text-gray-500" />
<ArchiveBoxOutline className="h-6 w-6 text-gray-500" />
<ArchiveBoxminiSolid className="h-4 w-4 text-gray-500" />
...
)
}
Note: Coloring the icon is done by setting the
color
property with CSS
Types
The types used to define the Icons come from preact/jsx
.
As a convenience, the type of the components is provided by importing HeroIcon
from the main package.
import { HeroIcon } from 'preact-heroicons';
const Icons: HeroIcon[] = [];
This can be useful when you want to construct objects containing HeroIcons and want to ensure strict typing.
Use with other JSX Factories
To ensure compatibility with automated bundler systems, these icons will, use preact.h as their JSX factory. To use your own JSX factory, you'll need to alias preact
to something else that exports a jsx function as h
in your bundlers settings.
Thanks
This package is a form of the work done by @graywolftech/react-heroicons. A lot of the package was written and retooled for Preact, but that package was was got me started on this.