Using with React

There is no dedicated React package yet, but the library works with React in two ways, with no extra dependencies.

The @fzhub/icons npm package is coming soon. The methods on this page use the hosted files.

Option 1: the `fz-icon` tag

Add the script to your project's main HTML file:

<script src="https://fzhub.tech/libs/fz-icons/0.1.0/fz-icons.js"></script>

Then use the tag in your components:

export function CoffeeBadge() {
  return (
    <span>
      <fz-icon name="dallah" size="20"></fz-icon>
      Coffee
    </span>
  );
}

If you use TypeScript, you need to declare the tag for JSX yourself.

Option 2: your own component

Copy the library file and the types file into your project:

mkdir -p src/vendor/fz-icons
curl -o src/vendor/fz-icons/index.js https://fzhub.tech/libs/fz-icons/0.1.0/index.js
curl -o src/vendor/fz-icons/index.d.ts https://fzhub.tech/libs/fz-icons/0.1.0/index.d.ts

Then create the component:

import { toSvg, type IconName } from './vendor/fz-icons/index.js';

interface FzIconProps {
  name: IconName;
  size?: number;
  strokeWidth?: number;
  title?: string;
}

const wrapper = { display: 'inline-flex', lineHeight: 0 };

export function FzIcon({ name, size = 24, strokeWidth = 2, title }: FzIconProps) {
  const svg = { __html: toSvg(name, { size, strokeWidth, title }) };
  return <span style={wrapper} dangerouslySetInnerHTML={svg} />;
}

And use it like this:

<FzIcon name="palm" size={32} title="Palm tree" />

toSvg only returns a string and does not need the browser, so it also works with server-side rendering.

Option	Good for
`fz-icon` tag	The fastest way, with no files in your project
Your own component	Icons live in your project, and TypeScript checks their names

Use icon names from the names list. A name that does not exist shows nothing.

Using with React

Option 1: the fz-icon tag

Option 2: your own component

Option 1: the `fz-icon` tag