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.