Alternate Icon Library

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
Post Reply
Jhstephenson
Posts: 297
Joined: Wed Apr 22, 2015 11:44 pm

Alternate Icon Library

Post by Jhstephenson »

I came across an Icon library that I really like (lucide).

I have been using mostly font awesome icons, but would like to switch to these.

How/where do I put them so that they are accessible to my aware apps?
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: Alternate Icon Library

Post by hpl123 »

I played around a bit with it, nice icon library. The icon solution is a bit different that other icons I have worked with (png file icons or icon fonts) so works a bit differently and I got it working by doing the following:

1. Add Lucide CDN to startup.html (in the top section under the head tag):

Code: Select all

<script src="https://unpkg.com/lucide@latest"></script>
2. Add the icons you want throughout your app in the following format:

Code: Select all

<i icon-name='menu' class='lucideicon'></i>
3. Add Lucide icon generation script to startup.html (end of html file so e.g just before </body> tag):

Code: Select all

<script>
$( document ).ready(function() {
    lucide.createIcons();
});
</script>
4. Create CSS class to style icons, position and change icon size etc.:

Code: Select all

.lucideicon {height:12px;}
Another thing worth mentioning is this. These icons are loaded when a JS function is executed (step 3 above) which means this function also needs to run every time you open up something new that has one of these icons e.g a form, query, layout etc..

NB: I spent 5 min on this so there may be other ways to implement this that work better e.g use icon fonts etc.. Using this icon set as icon fonts would arguably be better but I think I read something about them not recommending developers to go that route for whatever reason.
Henrik (V8 Developer Ed. - Windows)
PointsWell
Posts: 1457
Joined: Tue Jan 24, 2017 5:51 am
Location: 'Stralya

Re: Alternate Icon Library

Post by PointsWell »

Haven't downloaded the icon set, but wouldn't it be easier to download the icons, place them in the folder* with the basic set of icons and use them directly?

* not at my desk to be more specific on folder name
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: Alternate Icon Library

Post by hpl123 »

PointsWell wrote: Wed Nov 02, 2022 3:09 am Haven't downloaded the icon set, but wouldn't it be easier to download the icons, place them in the folder* with the basic set of icons and use them directly?

* not at my desk to be more specific on folder name
That is also one of the things they don´t recommend (the downloaded files are SVGs), don´t fully understand why (I have spent 6 minutes in total on their site though so can be why lol) but here is what they write. Can be the speed / performance thing only or possibly something else related to how their icons work:
It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Treeshaking). Otherwise it will load all the icons, making you webpage loading slower.
This could be they talking about sprite load primarily i.e loading 1 image that has all icons on it every time an icon is to be used and in that case I can understand it affects performance.
Henrik (V8 Developer Ed. - Windows)
PointsWell
Posts: 1457
Joined: Tue Jan 24, 2017 5:51 am
Location: 'Stralya

Re: Alternate Icon Library

Post by PointsWell »

TBH I haven't looked at their advice at all, I just looked at what was contained in the download zip (845+ image files: for some odd reason my iPad won't tell me the image type though) so I'm unclear how it would be more efficient to download from another server rather than your own. Only reason I can think of for not using locally is that they foresee updating the images.
Jhstephenson
Posts: 297
Joined: Wed Apr 22, 2015 11:44 pm

Re: Alternate Icon Library

Post by Jhstephenson »

Thanks,

I would prefer to load them locally, which I have done. But, I can't figure out how to actually access them in the configurator so that they are available when someone runs the app.

I created a folder called Icons in the Custom folder under ..AwareIM\Tomcat\webapps\AwareIM\

How do I access them from there? Or can I even do that?
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: Alternate Icon Library

Post by hpl123 »

Jhstephenson wrote: Thu Nov 03, 2022 5:21 pm Thanks,

I would prefer to load them locally, which I have done. But, I can't figure out how to actually access them in the configurator so that they are available when someone runs the app.

I created a folder called Icons in the Custom folder under ..AwareIM\Tomcat\webapps\AwareIM\

How do I access them from there? Or can I even do that?
If you have placed all icon files in your Aware folder and then the subfolder "Icons", then you can access it directly by using the path:

Code: Select all

Icons/myicon.svg
How you use the icon in the config tool depends. For menu items you can select a file as the icon (not sure it supports SVG though) i.e in the menu item icon selection window, you select the file (icon) you want to use. If that doesn´t work or you want to use the icons in some other place, in custom operations, headers, forms/queries etc. etc. you would use it with a HTML tag of some kind e.g a IMG tag and you can then also add other things like style etc.:

Code: Select all

<img src="Icons/myicon.svg">
Henrik (V8 Developer Ed. - Windows)
Jhstephenson
Posts: 297
Joined: Wed Apr 22, 2015 11:44 pm

Re: Alternate Icon Library

Post by Jhstephenson »

Thank,

Actually I think it needs to be "Custom/Icons/glasses.svg"

Jim
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: Alternate Icon Library

Post by hpl123 »

Jhstephenson wrote: Thu Nov 03, 2022 11:10 pm Thank,

Actually I think it needs to be "Custom/Icons/glasses.svg"

Jim
Yes, you are correct. I read it CUSTOM folder named ICONS lol.
Henrik (V8 Developer Ed. - Windows)
Jhstephenson
Posts: 297
Joined: Wed Apr 22, 2015 11:44 pm

Re: Alternate Icon Library

Post by Jhstephenson »

Ok. This is interesting.

Using 'Custom/Icons/glasses.svg' works and shows up on the Query Preview screen just as I want it to.
Screenshot 2022-11-04 161356.png
Screenshot 2022-11-04 161356.png (6.05 KiB) Viewed 1806 times
But when I then try and save the query I get a "Exception while saving the object null error".

Any ideas on that?

Jim
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: Alternate Icon Library

Post by hpl123 »

Jhstephenson wrote: Fri Nov 04, 2022 10:13 pm Ok. This is interesting.

Using 'Custom/Icons/glasses.svg' works and shows up on the Query Preview screen just as I want it to.

Screenshot 2022-11-04 161356.png

But when I then try and save the query I get a "Exception while saving the object null error".

Any ideas on that?

Jim
Strange and I wouldn´t think these were related but who knows, Aware is maybe having problems saving SVG to the DB or something like that. The other solution I wrote about first in my replies above would most likely not have these issues if you can´t get it working any other way.
Henrik (V8 Developer Ed. - Windows)
Jhstephenson
Posts: 297
Joined: Wed Apr 22, 2015 11:44 pm

Re: Alternate Icon Library

Post by Jhstephenson »

I think there is some kind of issue in Aware with the path for saving the icon.

I created a new bsv and just added one query on the RegularUser BO. Put the Icon on it and saw it on the preview. But when I went to save it I get this error:
Screenshot 2022-11-07 101009.png
Screenshot 2022-11-07 101009.png (8.45 KiB) Viewed 1749 times
I am going to submit a report to support.
Post Reply