The last icon library you will ever need
Thanks to custom elements

A Web Developer based in Belgium, specialized in PHP & JS development
Search for a command to run...
Thanks to custom elements

A Web Developer based in Belgium, specialized in PHP & JS development
No comments yet. Be the first to comment.
I recently needed to collect all changes in one file for reporting purposes. Found this article: https://ratfactor.com/cards/git-diff-with-new-files In case you need something similar on Windows, here

Some projects start with a grand plan. Others start because you just need to read a file without thinking too much about it. That was the case for spread-compat. I needed a common interface for CSV, X

With modern css, you can almost get rid of sass. But there is one last pain point : media queries. Not being able to use variables or an easy, common syntax for typical breakpoints is really annoying. That is, until you meet Media Queries Level 5. I’...

This is a quick article to share this demo I just made. https://codepen.io/lekoalabe/pen/JoPNWpX

Modals are typical UI elements for many web apps. There are countless packages dedicated to that specific features, each framework creating its own variation. Popular frameworks like Bootstrap also have custom code to deal with it. But all this feels...

I had quite a bit of spare time recently so I decided to play around with Bootstrap 5.
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:
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).
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.