Strapi heroicons field plugin

Plugin for adding heroicons to Strapi.

Key Features • How To Use • Credits • License

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:

• 🛡 heroicons

License

MIT