[Isomorphic]

A quick update - it occurred to us that, probably in conjunction with a lack of caching, an issue with flickering might arise from there being ~1000 symbols in the sprite - symbols are shadow DOM elements, so vast numbers of them would take time for the browser to process. But we tested showing symbols directly from solid.svg (once mapped to currentColor) in a local Showcase and we still see no flickering.

If you only saw the flickering when using .svgIcon (ie, when setting SVG fill directly, rather than CSS color), there's a vague possibility that using CSS to set SVG attributes directly, rather than just CSS color, might behave differently enough that it can cause a flicker - we don't see that in testing or in the Showcase samples, though, so it seems unlikely.

In the meantime - we've added a new class, .icon, which sets CSS color, rather than SVG fill and stroke - you should see that in tomorrow's builds, dated March 30 and later.

[EDIT]

Note that, on further testing, we find that if your setup is not configured to cache SVG, then a sprite with hundreds of symbols may indeed cause flickering when applying stateful modifications to individual symbols, as a result of the browser re-loading and processing the entire sprite.

The solution is to ensure that image/svg+xml is cacheable.

[claudiobosticco]

Hello, thank you very much for your detailed explanations, much appreciated.

I can confirm that after enabling the caching via FileDownload servlet the flickering is gone.

About caching I must say that I've tried to use a webjar to pack the sprites files, but in this way I can't map the URLs in the FileDownload servlet, I mean, if I add:

   
    <servlet-mapping>
        <servlet-name>FileDownload</servlet-name>
        <url-pattern>/webjars/FontAwesome/*</url-pattern>
    </servlet-mapping>

then I get a 404. Is it not supported by the FileDownload servlet?

[Isomorphic]

We've never used WebJars. The FileDownload servlet will discover static files on either the filesystem or discoverable via the classpath (ClassLoader.getResource()).

From a conversation with ChatGPT, it looks like we are meant to translate "/webjars" to "META-INF/resources/webjars". We can add that.

[claudiobosticco]

In the meantime - we've added a new class, .icon, which sets CSS color, rather than SVG fill and stroke - you should see that in tomorrow's builds, dated March 30 and later.

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

I can confirm it's working with fontawesome svg sprites after adding fill="currentColor", thank you very much