[claudiobosticco]

Hi Isomorphic, thanks for the hint, I'll try.

just noticed: maybe the fill color for the svgIcon in Twilight skin is a bit too dark? Seems similar to the color of buttonDisabled for instance.

[Isomorphic]

You may be able to use the file remotely if you preload it in your page with anonymous crossorigin, as we do with font-files in the Showcases - something like:

<link rel="preload" href="path/to/your/icons.svg" as="image" type="image/svg+xml" crossorigin="anonymous">

[claudiobosticco]

yes, exactly, it works only when serving it from my domain. And yes, that's the file I'm using.

[Blama]

Blama if I understand correctly, seems not possible: https://docs.fontawesome.com/web/add...th-svg-sprites

Haha, yes.

[Blama]

Hi claudiobosticco,

do you mean it works if you serve them from your domain, but not when including them from FontAwesome?
If so, what sprite-file are you using? fontawesome-free-6.5.1-web.zip/sprites/solid.svg? Is this also available unpacked to link it directly?

Did you see this advice? Perhaps you need to include them from your server.

Best regards
Blama

[claudiobosticco]

Blama if I understand correctly, seems not possible: https://docs.fontawesome.com/web/add...th-svg-sprites

[Blama]

Hi claudiobosticco,

no, I haven't tried it yet.

Best regards
Blama

[claudiobosticco]

Hi Blama I'm playing around with fontawesome and the svg support in latest 13.1. It's working while I include the sprites files in my project, did you succeed while using the fontawesome kit, by chance?

[Isomorphic]

We briefly tested some output like that from FontAwesome some time ago - one thing we noticed in our quick test with default export options was that it would correctly extract each symbol's styles to a new external css class, and apply the style-name to each symbol - but it always used the same class-name, something like .cls-1. Since some graphics had different combinations of values for fill and stroke, this meant the styles it exported were just clobbering each other in the same .cls-1 class.

Of course, it seems pretty likely that FontAwesome can export a different class-name for each symbol if you find the right export options.

[Blama]

Hi Isomorphic,

I played around with it, this is amazing. No flashing and no network requests.
And I just checked, FontAwesome offers their icons in a sprites-svg with named symbols inside as well.

A really cool feature.

Best regards
Blama

[Isomorphic]

Bad link in the previous response - the sample is here.

As you move between skins, you'll see these SVG represented differently by default, either filled or not

[Isomorphic]

hi Blama,

We added a 13.1 sample that demonstrates using SVG symbols in the framework, as described in the docs - the sample is there now but, unfortunately, we included a path error, so the SVG container file is never loaded.

You can either wait for tomorrow's builds or you can tweak the sample source - instead of

var spriteFile = "/isomorphic/system/reference/inlineExamples/html/svg/mediaPlayer.svg";

it should be

var spriteFile = "[ISOMORPHIC]system/reference/inlineExamples/html/svg/mediaPlayer.svg";

Note that this sample is a limited/pruned look at an internal testbed for this mechanism, so is both fairly complex and may be incomplete - so we may simplify the code - but the current sample code should show the feature sufficiently.

[Isomorphic]

hi Blama,

Yes, the state-list hasn't changed, the doc sample just didn't include them all. Also yes, we'll look at adding a sample soon.

[Blama]

Hi Isomorphic,

no, I did not know that and just read the docs. Amazing! If this works and does not have any flickering (browser) problems, this is the perfect solution.
Could you add a sample for this? This would make feedback on the feature a lot easier.

Quick question: Right now with stateful images one has "Over", "Down", "Disabled" but also "OverDown". Is this still supported? I assume yes, but just to be sure.

Best regards
Blama

[Isomorphic]

Are you familiar with SVG <symbol> tags? You can define a bunch of those in a single svg file, treating it as a giant sprite, and you can then <use> them later - in this case, there are no bulky DOM modifications or reloads associate with svg, so flickering should not be an issue.

We have some 13.1 docs which discuss it.