renatomoor / directus-extension-iconify

Iconify dropdown extension for Directus

directus-extension-iconify

This extension adds a field type to Directus that allows you to select an icon from the Iconify library.
It will save the icon name as string in the database.
You can use the field in your frontend to display the icon by using one of the Iconify components.

Installation

pnpm i directus-extension-iconify -D # with pnpm
yarn add directus-extension-iconify -D # with yarn
npm i directus-extension-iconify --save-dev # with npm

Usage

1. Go to your directus collection and create a new field
2. Select Iconify Dropdown as field type within the group "Selection"
3. Add your key
4. If you to use a custom icon library, you can add it to the whitelist in the extension settings
5. Click "Continue in Advance Field Creation Mode"
6. Go to the Display tab and select "Iconify Icon" as display type
7. Save the field

Now you can use the field in your collection.

Options

Whitelist icon libraries to be used in the field:

Preview

directus-extension-iconify's Issues

Extension does nothing

I installed the extension even with pnpm or npm and via marketplace and I can't achieve to add the iconify field.
I use directus in a docker container, the extension settings inside the directus app show the extension as installed and enabled.
Does anyone had the same issue and can offer a solution ?
Thanks for helping me.