Strapi plugin logo for heroicons field

heroicons field

Add a custom field to select heroicons in Strapi.

thumbnail for heroicons field

Heroicons Heroicons

Strapi heroicons field plugin

Plugin for adding heroicons to Strapi.

Version License

Key FeaturesHow To UseCreditsLicense

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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:

License

MIT

Install now

npm install strapi-plugin-heroicons-field

STATS

1 GitHub star119 weekly downloads

Last updated

221 days ago

Strapi Version

4.0.0 and above

Author

github profile image for Ricardo Gomez @rgomeztinoco
Ricardo Gomez @rgomeztinoco

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.