question about stockIcons.svg

[claudiobosticco]

Hello, I am interested in the possibility of having the stock icons available in different stroke widths, as the current ones appear quite thin.

I've been experimenting with stroke and stroke-width attributes as it seems doable to modify the stockIcons file, but before I invest more time in this, I wanted to ask if offering stock icons with varying stroke widths is part of your roadmap.

I am also fond of solid icons, although I understand that creating these would likely require a significantly greater magnitude of effort.

[Isomorphic]

hi Claudio,

Firstly, it seems unlikely that you could reliably affect the SVG in Shiva's stockIcons.svg with stroke and stroke width - most of them have a single compound-path, which effectively draws icons using a number of filled shapes, rather than stroked lines. That's why setting "fill" to currentColor works. So, as well as being time-consuming, it would be surprising if affecting stroke-width in these icons were to work well.

However. The stockIcons.svg in Shiva has icons from Google's Material-Symbols icon-set, which is available in various styles (outline, rounded, filled, sharp) and in 7 weights (100-700). The ones in Shiva right now are rounded (outline), 300 weight which, as you say, makes for pretty narrow images. Google claims that all Material-Symbols variants have the same icons with the same names (not quite true), and we have a set of src-strings that map our stockIcons to Material-Symbols icon-names. So, technically, we do have a version of stockIcons.svg for each of the style/weight variants and an app could switch among them by replacing stockIcons.svg in its skin dir.

In the future, we'll make the Material-Symbols variants available, and may also add mappings for other icons-sets, like FontAwesome's free solid.svg.

But for now, we'll test out a few icon-weights in Shiva - if things look better with more weight, we'll make that change.

[claudiobosticco]

Thanks for your reply. I actually tried adding stroke and stroke-width only to a handful of icons (those in the grid's header context menu) where it seemed to work pretty well.

But of course if you're taking care of this is much better than what I can try to modify by myself :)

[Isomorphic]

Can you describe the change you made that seemed to work well?

We did a quick test with applying a stroke-width and a stroke set to "currentColor" on a symbol and didn't see positive results.

[claudiobosticco]

Yes, sure, this is the grid's header context menu in Shiva without modifications:



and this with the change on the check icon:



where I've added stroke="currentColor" stroke-width="32" to the path:

<symbol id="check" viewBox="178.04 -693.04 603.42 423.12" fill="currentColor">
<path stroke="currentColor" stroke-width="32" d="m379.154-323.153 363-363.385q6.759-6.307 16.148-6.5 9.39-.192 16.467 6.553 6.692 7.129 6.692 16.499 0 9.371-6.692 16.063L399.385-278.539q-8.616 8.615-20.231 8.615-11.615 0-20.231-8.615L184.616-452.846q-6.692-6.759-6.577-16.149.116-9.389 7.245-16.466 7.129-6.692 16.307-6.692 9.178 0 16.255 6.692l161.308 162.308Z"></path>
</symbol>

[Isomorphic]

Ah, ok - you set a 32px stroke-width. That would kind of work, but would of course be dependent on the original size of the SVG - a 32px border would be EXTREMELY wide if these icons didn't happen to already be around 600px wide.

[claudiobosticco]

But for now, we'll test out a few icon-weights in Shiva - if things look better with more weight, we'll make that change.

just to give more context, I must say that I noticed the thin stroke also because I was testing Shiva with Roboto-regular, as the Roboto-Light has the know problem with bold in Chrome https://forums.smartclient.com/forum...hrome-on-macos
and with that font the icons seem even more "thin":

[Isomorphic]

hi Claudio,

We've switched Shiva from weight 300, as seen in your screenshot, to weight 400 in the same style (Rounded) - you'll see that change in tomorrow's builds, dated July 9 and later.

We're not sure the icons look good at higher weights, but we'll provide the stockIcon subsets of the Rounded and Filled Material-Symbols variants of all weights 100-700, and you can try them out by replacing stockIcons.svg in your project. We'll include them in the Skin Editor dir this week.

Finally, we also fixed the colors for the checkboxes in the last grid-field in your images - the inline checkboxes should appear disabled in normal boolean-fields (not red or black).

[claudiobosticco]

hi Claudio,

We've switched Shiva from weight 300, as seen in your screenshot, to weight 400 in the same style (Rounded) - you'll see that change in tomorrow's builds, dated July 9 and later.

Thanks, I see it and I do feel that could be the perfect match with the Roboto-Light-Vivid

We're not sure the icons look good at higher weights, but we'll provide the stockIcon subsets of the Rounded and Filled Material-Symbols variants of all weights 100-700, and you can try them out by replacing stockIcons.svg in your project. We'll include them in the Skin Editor dir this week.

thanks, I'll try them with the Roboto Regular

Finally, we also fixed the colors for the checkboxes in the last grid-field in your images - the inline checkboxes should appear disabled in normal boolean-fields (not red or black).

thanks, just a doubt: is it correct that they appear disabled also with canEdit: true which enables toggling them?

[Isomorphic]

hi Claudio - you're right about the checkbox-icons in LG boolean fields - we'll fix that and let you know.

On switching to different icon styles and weights, you can do that now with today's builds, dated July 12 and later - this does remain undocumented functionality and the actual function calls or parameters might change before its finalized.

Run a Showcase grid sample with a complex header-menu, perhaps this one, and right click a field-header. In the browser console, you can now switch media immediately by calling isc.Media.useMedia(variant) - variants are in the format "ms_100_rounded" and "ms_100_rounded_filled", where the "ms" stands for Google's Material-Symbols, and the weight-part can be from 100-700.

For example:

// lightest weight, rounded-outline
isc.Media.useMedia("ms_100_rounded")

or

// heaviest weight, filled
isc.Media.useMedia("ms_700_rounded_filled")

or

// the default weight and style for Shiva
isc.Media.useMedia("ms_400_rounded")

Right now, these calls must be made after Shiva is loaded.

You can also permanently use a certain set of stockIcons by copying the variant from the "stockIconSets" dir in the "helpers" dir and renaming it to stockIcons.svg in your project. This approach shouldn't change.

[Blama]

Hi Isomorphic,

I tried this here (SNAPSHOT_v13.1d_2024-07-10) and I'm getting this error in the Developer Console Log:

isc.Media.useMedia("ms_400_rounded")

11:31:40.754:TMR0:WARN:Log:TypeError: isc.Media.iconSets[isc.Media.iconSet] is undefined
Stack from error.stack:
    [c]Media.useMedia()
    unnamed()
    [c]Class.evaluate()
    [c]Class.evalWithVars()
    [c]Log.evaluate()
    [c]Class.evaluate()
    DebugTarget.evalJSWithDevConsoleVars()
    call()
    handlePacket()
    packetReceived()
    receive()
    [c]Class.fireCallback()
    Timer._fireTimeout()
    Timer.setTimeout/_7<()

Best regards
Blama

[Isomorphic]

hi Blama - yes, it isn't supported until today's builds, dated July 12 and later

[Isomorphic]

Note that today's builds are now available - however, there is a bug in this new useMedia() support - a regex has been broken by obfuscation, so the variant-strings aren't being detected. We'll address it for tomorrow's builds.

In the meantime, if you really want to try it out, you can use the definitely internal and temporary method isc.Media.changeSVGStockIconSource(variant). Note that 5 icon mappings for missing MenuItem images in ListGrid menus were added this morning but didn't make the build - so you'll see a couple of icons that only show up in 400 Rounded - those are in the other variants for tomorrow's builds, along with the fix for Media.useMedia()

[Isomorphic]

Following up - you should find everything discussed here in today's builds, dated July 13 and later.

Additionally, you can now call isc.Media.useMedia(variant) without Shiva first loading - in other words, it will work in any skin, even really old ones like BlackOps, but there are some provisos as things stand right now, 3 specifically:

1) icons in the grid-menu will work as expected in any skin, because those icons are all .png in all skins, and the "known" stockIcon base-URLs are all .png - but in pre-Enterprise, many icons are .gif and those icons won't map

2) as you know from these recent threads, a lot of new settings/config-changes have been made for Shiva to properly size, style and scale icons in various widgets and use-cases, where those features didn't exist before - those settings aren't in the other skins, in part because we purposely didn't auto-size many icons before, because other image-types don't scale with clarity - so some icons won't be properly styled/sized/scaled without load_skin tweaks

3) in a Flat skin like Twilight, almost all icons will map as expected - but anywhere it's load_skin overrides a src from the known file-name, those icons won't map - this is done in cases where we use a .png sprite via a CSS class, for example - again, just a case of load_skin tweaks for other Flat series skins, more indepth ones for Enterprise and older

Let us know what you think of the icon-color - it turns out, the original icon-color was actually vaguely blue and it became obvious and jarring to see when the icons were heavier or filled - so we made it vaguely green instead!

[claudiobosticco]

Hello, I've briefly tested the new feature and it's pretty cool!

The new icon color seems a good match for the Shiva green.
Actually I'll be forced to change that green, so maybe I'll be interested in how to change the icon color too. Is it something on your roadmap for the skinEditor in 13.1? Is it something doable with some method in the Media class?