Preventing flash of unstyled SVG

[ShonM]

https://sarasoueidan.com/blog/svg-style-inheritance-and-FOUSVG/

The technique of 1em here worked really, really well to prevent what seems like ceri-icon giving a pop-in effect. If you have a bunch of ceri-icon inside background colored elements and rapidly reload, you'll see the problem.

A note in the README about this would be awesome, but I completely understand this being more userland issue than library issue and would be just as happy with a close.

[paulpflug]

Hey, I'm always interested in improving ceri-icon.

What do you mean with pop-in effect? And how did you solve it?

A drawback of ceri-icon is, that it is js dependent, so there is nothing rendered until js is loaded and at least partially evaluated.
The problem is similar to <img>, which doesn't know the size of the image until loaded.

So if you know the size of the icon you can reserve it: (size property defaults to 1em)

<ceri-icon style="display:block; width:1em; height:1em" name="fa-heart"></ceri-icon>

Is that what you meant? Then I shall put it into the readme 😄

[ShonM]

What do you mean with pop-in effect?

It's difficult to describe, but it seems that the SVG is taking up quite a bit of space until loaded. It sounds just like you described it; the browser guessing until it's told otherwise.

And how did you solve it?

In the stylesheet, but just width/height set to 1em like you wrote. It ensures that the initial, before-JS load of the page doesn't include huge SVG's, since first paint includes font sizing (er... right?)