And obviously at some point I used some icons from Bootstrap Icons. I was really disappointed that there was no "good" way to load the icons : you could load the whole set (but then you end up loading tons of unnecessary icons) or you have to inline (either through js or manually) the icons. There must be a better way, and I created a custom element to help with this (and yes, it's only working on modern browser, the others don't deserve nice icons).
But then... I worked on another project, that was using another icon set. Obviously, I could duplicate and tweak my custom element for that library, but what if I need two icon sets at the same time? Or a third one ? Or a custom set of icons ? That would be very annoying indeed and I know the designers I'm working with :-)
Enter... last-icon ! A modern, minimalistic custom element that supports any icon library, that is completely dependency free (no need for lit element, react stuff, shadow thingy...) and can, therefore, be used in any of your projects!
It supports by default the following icon sets:
- Bootstrap Icons
- Tabler icons
- Css.gg icons
- Fontawesome icons
- Bytesize icons
- Super tiny icons
- Material icons
And if that's not enough for you, you can configure it to point to any icon set of your choice, either hosted on a cdn or on your own website (if hosting thousands of svg is your thing).
Show me the demo!
There are quite a few things I'd like to improve, like loading all icons in one row (but that would require some kind of server to do so), maybe support older browsers (but I'm not sure that's necessary) and check if it's possible to make the whole thing accessible and/or support progressive enhancements for those with js disabled...
Otherwise, it's been working quite well so far in my tests.