[New Free Plugin] Heroicons 2.0

[Kayami]

Hey everyone!

We just released a big update of the free heroicons plugin. Try the demo here https://heroicons.bubbleapps.io/version-test

Get it here for free Heroicons Plugin | Bubble

You can use heroicons in two ways:

Render individual icons on your page in one of three styles: Outline, Solid or Mini

To render an individual icon, simply look for one of three elements in your elements tree depending on the style of icon you prefer.

Outline Icon (defaults to 24x24)
Solid Icon (defaults to 24x24)
Mini Icon (defaults to 20x20)

Then customize any of the properties to your liking

Size
Color
Border
Shadow
Clickability

Use heroicons inside of native bubble buttons using a bracket notation syntax

If you want to use a heroicon in your buttons, simply add the special bracket notation to the text of your button.

[hil]chat-bubble-left[/hil] Chat
[hir]cog-6-tooth[/hir] Settings
[hib]cloud[/hib]

The plugin will automatically detect this notation and swap out the text for an icon at runtime. In this version of the plugin, you are able to customize the icons inside buttons even more.

Size
Style
Color
Alignment

Try the demo https://heroicons.bubbleapps.io/version-test
View the editor Heroicons | Bubble Editor
Read the docs Heroicons Plugin | Bubble
Get the plugin Heroicons Plugin | Bubble

[treb.gatte]

Did you remove the need to load Iconify? I’m not seeing a reference to it on the plugin page.

[Kayami]

yup, no longer needed!

[treb.gatte]

Well, not so fast. I’m still seeing an issue with buttons if I don’t load Iconify. All other places, it’s working correctly.

[Kayami]

does this happen 100% of the time on that page? or only sometimes?

is it a public page we could check out to debug the issue? (no need for editor, just a link to the page itself would be good enough)

in the meantime you can simply revert - thanks for the bug report!

[treb.gatte]

I sent the link via DM. It’s our dev environment and yes, this page is public.

[Kayami]

thanks! we’re on it

[Kayami]

hey @treb.gatte so the problem is that the heroicons team renamed some of the icons.

we are figuring out which ones are affected and adding it to the docs, but there is no way to remain backwards compatible without making the plugin heavier (by also keeping all of the old icons).

so in your case, you just need to update the broken icons by using the new names.

user-add is now user-plus
login is now arrow-right-on-rectangle

could you try that and let me know if the icons show up?

in general you can find all the new names here → https://heroicons.com/

[treb.gatte]

I think that’s part of it, but I’ve found one where the icon wasn’t renamed. Am I missing something? Click Sign In in the upper right, of the site link I sent you, so that you can see this button in the popup.

[treb.gatte]

Let me go through the site and update the icons that have changed. I wonder if once it encounters an erroneous name, it simply fails for every other icon.

[treb.gatte]

Ok @Kayami, I’ve updated the site and the only place it fails is on buttons. Everywhere else seems to work beautifully.

[Kayami]

is there a public page where it fails on a button we can check out? this will likely be the case for others as well, but i can’t seem to reproduce it.

[treb.gatte]

I dm’d you a link yesterday as that’s the site I’m testing. Let me know if you no longer have the link.

Thanks!
—Treb

[Kayami]

@treb.gatte did you update the plugin back to the latest version after changing the text? I can see that the url you sent me is still on 2.2.2 and not the latest version.

[treb.gatte]

Ok done and now I see a bunch of icons that were renamed. However, as I’m replacing them, they are loading so that’s awesome!

[munxch]

this is amazing, thank you so much

[martin9]

@Kayami - this plugin is awesome, many thanks.

One small thing I’ve noticed is that when an icon isn’t visible, based on an element conditional, an unchecked “collapse when hidden”, doesn’t prevent the space it occupies from collapsing.

[Kayami]

I’ll look into it! pre responsive editor this didn’t exist, but maybe we can support it now

in the meantime you can just wrap the icon in a group and collapse that one (u probably already know)

[Kayami]

just added (native browser) tooltip support to the heroicons plugin!

[Kayami]

new update! added support for a spinner icon for loader buttons.