Plugin: Iconify by pticon

[dave.kolaja]

Thread dedicated to Iconify plugin

DEMO: https://pticon.bubbleapps.io/iconify
Plugin: https://bubble.io/plugin/iconify-1604083196447x185573648335896580

[dave.kolaja]

Hello @rico.trevisan ,

Apparently bubble used my email Alias as the name, that’s why you could not have find me as @pticon. But here we are. Thank you for using this plugin and let me take a look on your points (CSS/JS Timing + best practices - #9 by rico.trevisan)

1. I’ve just create new thread dedicated only to Iconify plugin (as you can see, please let’s continue our chat here)
2. Since all over Iconify website the creators mention v. 1.0.7, am using this one. Honestly I had no clue, the v.2 exists and what I found, even documention is not backward compatible, so I can try at least what will happen once I change the JS source and I will test it when I will have enough time (I did not touch this plugin since it fulfilled my personal requirements)
3. Surely I can upgrade even the API, this update came after creation of this plugin
4. I just found out, even the Demo page link is set in plugin, there is no link on plugin page, so here it is (https://pticon.bubbleapps.io/iconify). You can see there I do not recommend using this plugin in repeating groups, because the behaviour is unpredictable even though this plugin works well in RGs on my demo page and either in my project (not published yet). I was not even able to reproduce the issue on 100%, it happen sometimes while calling icons from nested/refrenced tables.
   
   
   
   
   
5. Regarding to the BUG you have, how do you call the Icons? Because clearly the text comes empty to the properties.icon.
6. Timing is bit complicated when writing the bubble plugin (Loading Data - Bubble Docs) . I’ve spent lot of time by searching how it works and did not found any answer. Bubble promises when the plugin expects data, it fires asynchronous action, but honestly, I feel like it does not work and I’m not the only one.

Because I’m not the real developer (I’ve learned JS basics just to write this plugin) I’m opened to any suggestions about the code. This is also the reason, why the code is Open Source.

UPDATES:
2. JS cannot be replaced, all Icons disappear, so it’s really incompatible.
3. API cannot be upgraded because it impacts the behaviour (I did a quick test), so I’ll let it as it is and try to upgrade it once I’ll have more time to dive in.

[mequelussi]

I noticed the following if I set the name dynamically I get:

The Iconify plugin / Iconify element threw the following error: TypeError: Cannot read property ‘trim’ of null
at eval (PLUGIN_Iconify-update–Iconify-.js:11:32)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/6b612deb538dbb14b1ebe68d89fdb6f27e2787c774607ae4e09d26035538b7bd/xfalse/x14:6:2069250 (please report this to the plugin author)

In this case name is being dynamically loaded into a Set Custom State on page load and I’m using a reusable element.

But I found that if I set a default value in the name it doesn’t give the error and loads the correct icon dynamically. Apparently it seems that at the time of loading it still doesn’t have the value and gives the error. That’s why setting a default value doesn’t happen.

[dave.kolaja]

I see, honestly if you take a look on my previous post in this thread in point 6 I am writing about Timing complexity in bubble. In Bubble documentation you can find a mention, that bubble fires the javascripts when the data is available, which from my perspective is not true. So what are you experiencing is something I just cannot handle. The data is being recieved too late or the icons javascript is being fired too soon. Also I have captured, that the javacripts actually fires several times during loading - so my question is, do you see the icon you are trying to call when the whole page is loaded? If so, I would just add condition that the trimming will not be applied on empty value.

[movelabs]

Hi @dave.kolaja !

Continuing our conversation in plugin page about the iconify element being inside of an clickable group, I reviewed the plugin code and I think I can help! Is it possible to allow forking the plugin?

[dave.kolaja]

Hello, send me a private message with your registred email address and I’ll add you as plugin editor.

[eed0926]

Hi! I need to display country flags. I recorded all countries in option sets. Flags, via icon values: emojione-v1:flag-for-japan
I load the data dynamically.
The icon is visible only if the page is reloaded before.
can someone help me with this? I want the icon to be visible without reloading the page.
http://joxi.ru/E2pw7ayCvB56lm - first page load and after reload the page
http://joxi.ru/J2bGdwWIq4jRkA - no page reload

[dave.kolaja]

Hi, unfortunately iconify plugin fires only once during page load. Which means, if the icon name is not available at the start, the original iconify.js will not call it from its servers. This plugin does not use API to retrieve icons, that’s why even users on free plan can use it. However I’ve managed to make a WORKAROUND, but bear in mind I strongly DO NOT RECOMMEND to use Iconify plugin in repeating groups, since sometimes I was experiencing unexpected behaviour.

[matt45]

Sometime in the past few weeks, Iconify icons in my app stopped displaying on Chrome, but still display on Safari.

Is anyone else experiencing this issue? Any fixes identified?

[shashi]

Yes! I came here to say the same thing. For some reason, the same icon will render properly in Safari/Firefox, but won’t display in Chrome. In HTML, the code for the missing icon’s svg tag has a height and width of “-2px”, but in Safari and Firefox, the height and width are correct.

For example in my site, I have a list of topic areas with associated icons.
They look like this in Firefox and Safari:

However, in all Chromium browsers, it looks like this:

The first icon is missing, as you can see.
The html of the missing icon in Safari is this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="53px" height="53px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512" class="iconify" data-icon="fa6-solid:landmark-dome" data-width="53px" data-height="53px" data-inline="false" style="transform: rotate(360deg);">...

However, in Chromium, the code is:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="-2px" height="-2px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512" class="iconify" data-icon="fa6-solid:landmark-dome" data-width="-2px" data-height="-2px" data-inline="false" style="transform: rotate(360deg);">...

Notice the size in Safari is 53x53 px, but for some reason the size in chrome is -2x-2 px. Any help in figuring out what could possibly be going on here would be greatly appreciated! If not, then I may have to switch to another plugin for this site.

[shashi]

Ok, so I just read all the above about not putting iconify in a repeating group. Perchance that’s my issue above. The workaround mentioned here requires that you know which icons you’re offering ahead of time. In my case, I allow users to select an icon from iconify.design for each record in the repeating group. So it looks like I’d have to offer them a subset of pre-selected icons to have the option set workaround work. Is that correct?

[lasse]

For those having the issue with the first icon in repeating groups not being displayed in Bubble v21, I can recommend checking out the plugin Iconify Extended, which was recently released: Iconify Extended Plugin | Bubble

After some initial testing I decided to spend the time replacing all 150 instances of Iconify with the Iconify Extended plugin in my app. Been testing it for a few days, and it seems to have solved several issues I had with the previous plugin:

• First icon always shows up in repeating groups in Bubble v21.
• Icons always display correctly whether they are inside a repeating group, a reusable element or any other usecase I’ve come across (icons would sometimes randomly not display in the old plugin).
• No more -2px errors being thrown in DevTools in Chrome.

[oli1]

Ohhh, this is great to hear. I’m terrified to replace the 10,000,000 I have throughout my app hahha.
For anyone who wants to solve the problem of the first icon not showing up, you can apply some CSS to solve the problem (does not solve the JS errors, but visually seems to solve all problems I’ve had).

IMPORTANT NOTE
This would affect any SVG. I haven’t been able to narrow it down just to iconify. So please improve/amend to fit your needs. But if you need a quick fix and don’t have any other SVG’s on your app it works.

svg {
display: flex;
width: inherit;
height: inherit;
}

[digitalmnz001]

@oli1

svg {
display: flex;
width: inherit;
height: inherit;
}

that really great, but i can someone give us css/js code to fix the delay on show/hide (really annoying)

[oli1]

Look at the iconify settings on the icon. There is a “timing” or something like that that defaults to 200ms. I always set it to 0ms immediately. It’s a dumb default.

Is that what you mean?

[quantumind]

@oli1 you can target iconify elements using .iconify selector instead of svg.

But plugin authors @dave.kolaja , come on, fix this. You have 72000+ apps using it.

[farouk.zemmouri]

Hello,

Iconify icons in my app stopped displaying on Android, but still display on Apple.

Is anyone else experiencing this issue? Any fixes identified?

Thanks in advance,

[bonjour_17]

Hi,
I have used this plugin in the past without issue. But today I can’t display an iconify properly on my page.

The icon won’t show. Only the background color.
(Here, the red-ish square on the left )

Am I missing something so obvious that I am being stupid?

Best