Alternate Icon Library

[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]

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/[email protected]"></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.

[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]

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.

[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]

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]

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">

[Jhstephenson]

Thank,

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

Jim

[hpl123]

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.

[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 (6.05 KiB) Viewed 663 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]

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.

[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 (8.45 KiB) Viewed 606 times

I am going to submit a report to support.