Forum Academy Marketplace Showcase Pricing Features

[FREE PLUGIN] Heroicons, by the makers of Tailwindcss

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 :slightly_smiling_face:

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)

5 Likes

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.

1 Like

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

Hey @avern87, thank so much for the suggestions :slightly_smiling_face:

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

  • Upated the element names SolidSolid Icon & OutlineOutline 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).

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

@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.

@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.

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.

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