[FREE PLUGIN] Heroicons, by the makers of Tailwindcss

[Kayami]

We use these icons in pretty much every app, and thought it was a good candidate for a free plugin to share with the community

Link to the plugin → Heroicons Plugin | Bubble
Link to the docs → Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
Heroicons website → https://heroicons.com/

Changelog:

1.0.0 initial release
1.0.1 fix - prevent clicks from propagating to elements beneath the icon
1.0.2 fix - styles work properly now & updated element name to inlude the word icon (easier to find)

[avern87]

LOVE this!

Really nice job. And, so far I’m loving the plugin. But, wanted to mention a few things I’m running into. It seems which icon the element is set to is getting saved as a part of an element style and color is not. Curiously, this means that applying a style to multiple icons will make them all the exact same icon, but won’t make them all the exact same color.

I wonder if it might make sense to add ‘Icon’ to the name of the two element types. After adding the plugin, it took me a while to realize the two elements are called ‘Solid’ and ‘Outline’. Naming them ‘Solid Icon’ and ‘Outline Icon’ might help save others from having to do some digging here.

Along those lines though, have you considered attempting to streamline the two types into one element and handling whether it’s outlined or solid as a selectable setting for the element? It might simplify copy and pasting workflows or conditions from one to the other. It seems that currently you can’t do this if you’re going from one type to the other.

Wanted to share the thoughts because I love the plugin and hope to see it get even better. I’m a huge believer in styles and was bummed to realize the limitation there due to the icon being part of the style and the color being left out. Hopefully that’s easy to address.

[avern87]

Would also love to see tooltip support. Is that a possibility?

[Kayami]

Hey @avern87, thank so much for the suggestions

I’ve just pushed an update (version 1.0.2) with a few of your suggestions:

• Upated the element names Solid → Solid Icon & Outline → Outline Icon
• Styles work properly now - no icon in style anymore

About consolidating both icon types into one - i’ll consider it but I was trying to prevent the plugin needing to load all of the icons if you only use one style, keeps it snappy.

You can always use the Replace element with a different type action on the right click menu if you want to switch icon type. That will keep all the properties (styles if same style name and colors).

[Kayami]

We’re working on a separate tooltip plugin that will be very feature rich & work together with this plugin. If you want to be kept up to date → Plugins for visual developers | Minimum Studio

[avern87]

@Kayami That sounds awesome! Will keep an eye out for sure.

Unfortunately, looks like styles aren’t fixed. Outline styles still include the icon and exclude the color.

[Kayami]

@avern87 did you upgrade the plugin to version 1.0.2? It doesn’t happen automatically with bubble you have to go to the plugin settings and set the new version.

[avern87]

Yes haha. Definitely updated.

It’s strange. If I put a new element onto the page, the styles work as you’ve described. But, if I go to any I had previously created, the styles still work the old way prior to your update. Weird right? I’ll just go back through and remove then add the icons again.

[Kayami]

ah, i think i know why - i changed the element names in the update… that probably means it sees it as a different thing now -_-

you’ll have to update it everywhere yeah, i recommend right clicking it and using ‘replace’ to select the new icon name

[Kayami]

I just added a new update 1.1.0 that enables dynamically picking an icon. See this tweet for an example → https://twitter.com/yelkhayami/status/1436368040220839938

[giulio.maselli]

Great plugin, I’m trying it right now. I’m using it to put icons in the buttons and the look is really beautiful.

First request: it would be extremely useful to have the social media icons available (facebook, twitter, tiktok, instagram, youtube, whatsapp and so on)

Second request: browsing the icons by name is slow and tedious, it would be nice to see the icons beside the names in the dropdown menu, or if it’s too complicated to implement to have at least a table on the support website with names and icons side by side

[Kayami]

hey @giulio.maselli i dont think i can show the icon, there is no way for me to do that in the plugin sadly. But here is the website with all the icons + names i use https://heroicons.com

as for the social icons, ill look into it

[giulio.maselli]

thanks for the link! it makes it much easier to look for icons

[reeceb]

Hi Kayami,
Just a heads up that your latest updated 3.3.1 - Fix clicked icons propogation is bugged. I have my icons setup in a parent group and have an attached workflow once i click on them. After updating, the workflow for the icon is ignored and the workflow for the group is run instead of the icon.

I rolled it back to 3.3.0 and it works as normal again.

[Kayami]

hey @reeceb thanks for the report! we’ll check it out

[johnny]

Hey @Kayami,

For me, the icons sometimes appears like this:

Any ideas on how to fix this? I saw on your documentation that I can add an an Iconify action upon page load, but I don’t see that action in the plugin.

[Kayami]

hey @johnny, do you have the experimental rendering setting enabled in your app by any chance?

[johnny]

Hey @Kayami,

Yeah, I do. I’ll turn it off to see if there’s any difference

Edit: Looks like that did the trick!

[Kayami]

cool, thanks for confirming @johnny - we still have to figure out how to support that experimental mode since a lot of people have it turned on

[johnny]

No problem! Maybe for the time being you could add a note in the documentation about the issue? I wonder what about the experimental mode breaks it…