png icons in latest Shiva build

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-09-21/AllModules Development Only (built 2024-09-21)

Hello, previously I noted this only for the menu buttons: https://forums.smartclient.com/forum...709#post273709

but it seems that there are several icons in the latest Shiva which are png instead of svg icons, for now I've seen:

- all Window button icons (close/minimize/maximize/restore)
- eventCanvas close icon
- ListGrid records remove icon
- ListGrid groupIcon
- TreeGrid opener icons

[Isomorphic]

Thanks Claudio, we'll take a look today and let you know when things have been fixed.

[Isomorphic]

hi Claudio - this general regression has been fixed for tomorrow's builds, dated September 23 or later.

[claudiobosticco]

Thanks, I see the fix using Shiva skin.

Unfortunately, I still see the problem using my custom skin based on the build from 5th of August.

The optimal solution for me would be a fix for this problem: https://forums.smartclient.com/forum...ployment/page2

so that I can update my custom skin without even bother what's changed.

Otherwise, I'll have to look for changes and do a manual update.

[claudiobosticco]

Unfortunately, I still see the problem using my custom skin based on the build from 5th of August.

I think the problem is related to this warning I see with my custom skin:

*16:27:18.665:WARN:Media:Unknown iconSetName: svg_materialSymbols

[Isomorphic]

Ah, yes, sorry about that - we've been finalizing and documenting how the StockIcons system works.

1) You can fix your issue by changing the isc.Media.useMedia() call in the load_skin for your custom Shiva skin

// this will use the stockIcons.svg from the skin
isc.Media.useMedia("svg");

// or, if you want a different style or weight, these will come from the central
// repo at [HELPERS]media/svg/stockIconSets

// use the same icons as the Shiva stockIcons.svg, but from the central repo
isc.Media.useMedia("svg:400:outlined")

// heavier weight and filled style
isc.Media.useMedia("svg:500:filled");

2) we've now exposed and documented the StockIcons system - please scan the 13.1 docs for "StockIcon" and let us know if anything isn't clear.

[claudiobosticco]

Thank you so much, it works perfectly now! I also see the new documentation, I'll look into it further as soon as possible.

[claudiobosticco]

Hello, I've just started reading the doc, and experimenting with the APIs, and I've already a question, if I add a StockIcon like:

var myIconSet = [
    {
        name: "logo",
        fromSrc:"[APP]icons/logo.png",
        src: "sprite:svg:[APP]/images/logo.svg#logo"
    }
];
isc.Media.addStockIcons(myIconSet);

so that I can both use:

isc.Img.create({src:"logo"})

to render the SVG, and also older code like:

isc.Img.create({src:"[APP]icons/logo.png"})

will render the SVG


is it expected that the [APP] part is actually required? It seems that it works only like that, and not with code like:

var myIconSet = [
    {
        name: "logo",
        fromSrc:"icons/logo.png",
        src: "sprite:svg:[APP]/images/logo.svg#logo"
    }
];
isc.Media.addStockIcons(myIconSet);

isc.Img.create({src:"icons/logo.png"})

[Isomorphic]

hi Claudio - that was a bug and we've fixed it for tomorrow's builds.

If you're interested, the issue was that the function that maps src-strings to potential stockIcons wasn't checking for an exact match with original stockIcon.fromSrc values, just the parsed version of them as expanded by Page.getImgURL().

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-10-31/Enterprise Deployment (built 2024-10-31)

I can confirm it's fixed, thank you very much.

Another question: to simplify icons (I've got some icons which are too complex to be effective), in my application, I would like to map multiple PNG icons to a single SVG icon. In this case, can I simply add more than one stockIcon to my iconSet, each with different names, and all using the same SVG icon?

BTW, that's really a cool feature!

[claudiobosticco]

Actually I've just noticed a problem, if I run this code in the showcase:

var myIconSet = [
    {
        name: "logo",
        fromSrc:"icons/logo.png",
        src: "sprite:svg:[APP]/images/logo.svg#logo"
    }
];
isc.Media.addStockIcons(myIconSet);

isc.Img.create({src:"icons/logo.png"})

I then see both the png and SVG icons for the sections "opener" icons:



Note that I see the same in my app, where the icons used in myIconSet actually exist.

[claudiobosticco]

also for isc.warn(), isc.say(), I see the png icon instead of the SVG.