Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (strapi-plugin-heroicons-field) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Strapi heroicons field plugin

Plugin for adding heroicons to Strapi.

Key Features • How To Use • Credits • License

screenshot

Key Features

Icon picker - custom field to use in your content types
- Change between outline, solid and mini icons
- Search for icons
Dark/Light mode
Supports advanced setting 'required'
Don't need to install any frontend library - it returns the SVG code of the icon and the name as a stringyfied JSON
Supports all the icons from the Hero Icons library

How To Use

In Strapi

To install this plugin, you'll need to be in the folder of your strapi application. Then, from your command line:

# using npm
$ npm i strapi-plugin-heroicons-field

# using yarn
$ yarn add strapi-plugin-heroicons-field

# rebuild admin panel
$ yarn strapi build

Then, you'll need to restart your server. After that, you just need to add a new custom field to your content types with the type Icon.

In your frontend

The plugin returns the icon as a stringyfied JSON, so you can use it as you want. Here's an example of how to use it in svelte:

<script>
    export let iconData;

    let svg;
    try {
        svg = JSON.parse(iconData).component;
    } catch (error) {
        svg = null;
    }
</script>

{#if svg}
    <div class="w-6 h-6">
        {@html svg}
    </div>
{/if}

Credits

This plugin uses the following dependencies:

🛡 heroicons

License

MIT