Dev - Move icons to SVG images

[jeremenichelli]

I was on a slow internet connection and discover the icons come from a font which adds tofu
boxes, delays content showing and makes FOIT worse.

We should definitely move to SVG, something that will also improve visuals on 1x pixel density screens.

I think that this, plus #1536 plus a better hosting server (something I've seen in the issues) will have a big positive impact in content serving.

[skipjack]

Can you be a bit more specific about which icons aren't SVGs? Most of our assets already are as far as I can tell.

Update: Ah I see you mean these? What would you propose instead, just importing the SVGs directly, or wrapping them in react components for more flexibility? The plus of the font is that they are easier to style though I know we can get around that a bit by wrapping them in react components.

[jeremenichelli]

Sorry for not being as clear as I should 🙏 I catched icon fonts in the desktop header to be more specific, even when SVG files are used on the background, they are still fonts.

My suggestion is inlining them, a react component would work for sure.

[skipjack]

@jeremenichelli no problem, yes I understand now. I think we may want to use react components for easier customization which may take a little thought. I might add this, and #1536, into the one of the other dev checklists ( #1525 or #1400 ) as our goal right now is to continue keeping the focus on cleaning up the content of the site. Feel free to start digging into these things and submitting PRs. I'd be happy to help push this and the other forward.

[skipjack]

Moved to #1400.

@jeremenichelli seeing as both you and @pierreneter seem interested in helping to tackle dev improvements (specifically performance and pwa it seems) I'll be inviting you both as collaborators and also to our slack channel. Looking forward to working with you both!