FormKit Iconify Loader

This package providers a FormKit icon loader for Iconify.

Installation

FormKit Iconify Loader can be installed with your favorite package manager.

# NPM
npm install @hedger/formkit-iconify-loader

# Yarn
yarn add @hedger/formkit-iconify-loader

# PNPM
pnpm add @hedger/formkit-iconify-loader

Usage

Import the provided createIconifyLoader function in your FormKit configuration file and use it to create a FormKit Icon Loader for your preferred Iconify icon set.

The following example illustrates how to create a FormKit Icon Loader for the Heroicons icon set.

import { icons } from "@iconify-json/heroicons";
import type { DefaultConfigOptions } from "@formkit/vue";
import { createIconifyLoader } from "@hedger/formkit-iconify-loader";

export const config = {
	iconLoader: createIconifyLoader(icons),
} satisfies DefaultConfigOptions;

You can now reference any icons from the Heroicons icon set in your FormKit inputs, as prefix icons or suffix icons, for example. You can also use the FormKitIcon component to render any icon from the Heroicons icon set.

<template>
	<!-- On a FormKit input -->
	<FormKit type="email" prefix-icon="envelope" />

	<!-- Using the FormKitIcon component -->
	<FormKitIcon icon="envelope" />
</template>

Using multiple icon sets

You may reference icons from multiple icon sets in your FormKit inputs. To do so, load all the icon sets you need and pass them to the createIconifyLoader function and make sure to prefix the icon names with the icon set name.

Here's an example where we load the Heroicons and the Majesticons icon sets.

import { icons as heroicons } from "@iconify-json/heroicons";
import { icons as majesticons } from "@iconify-json/majesticons";
import type { DefaultConfigOptions } from "@formkit/vue";
import { createIconifyLoader } from "@hedger/formkit-iconify-loader";

export const config = {
	iconLoader: createIconifyLoader(heroicons, majesticons),
} satisfies DefaultConfigOptions;

<template>
	<FormKit type="email" prefix-icon="heroicons:envelope" />
	<FormKitIcon icon="majesticons:academic-cap" />
</template>

License

Copyright © 2023, Nicolas Hedger. Released under the MIT License.