search

calaldees / KaraKara

Karaoke Event System - Attendees can view and queue tracks from their mobile phones
https://karakara.uk
GNU General Public License v3.0
29 stars 9 forks source link

Icons as inline SVG in CSS? #76

Closed shish closed 1 year ago

shish commented 3 years ago

We use ~10 icons from the FontAwesome icon pack - this adds ~150KB to the final bundle size, and results in some glitchiness because the "Enter Room" button on the front screen has an icon on it, which only loads after a second or two.

If those specific icons were added as SVG embedded in CSS, would that be smaller and faster-loading?

shish commented 3 years ago

Looks like fontawesome v6 will include a "download individual icon as svg" feature which will make this a lot easier, but v6 is currently in subscribers-only beta. Once that's available, it should be trivial to have a folder of FA SVGs, included in our CSS as-needed with parcel's data-url:

shish commented 2 years ago

Looks like including icons as inline SVGs is faster and more efficient, but they render differently and I'm not sure how to make it look nice :( I've added a draft PR with my work so far in case anybody wants to figure out how to fix the remaining issues

shish commented 1 year ago

It works now \o/

Not fully automated as there's an issue with parcel's out of the box svg->jsx converter, but built with a shell script for now