As we've mentioned before, we've got some major releases in the pipeline alongside Craft 4, and Icon Picker 2 (opens new window) is one of those! We've completed a full rewrite of the field with a focus on performance and usability.
New field#
The big-ticket item for this update was an all-new front-end for the field, written in Vue 3. This has allowed us to move away from selectize (opens new window) into something we have more control over, and far more performant. This was the foundation for building other exciting new features!
Icon Sets#
In Icon Picker 1, we had the concept of Icon Sets, Remote Sets, and Icon Sources, which was all a bit much. Remote Sets were treated differently to regular Icon Sets, and Icon Sources were the way to register a Remote Set.
In addition, we also automatically scanned the nominated folder (in your plugin settings) for individual SVGs, SVG Sprites and Font files. While this was no doubt convenient, it didn't really give us a lot of flexibility when it came to organising the individual icons (SVGs of Glyphs).
In Icon Picker 2, we've done away with the auto-scanning, and Remote Set/Icon Sources. You now need to create an Icon Set in your plugin settings, and select which "type" of icon set this will be. This gives us more flexibility and standardisation when it comes to processing icons, not to mention it allows you the developer to extend an existing Icon Set if you require special handling of how you treat icons.
Font Awesome and more#
We're big fans of Font Awesome (opens new window), and Icon Picker 2 supports using Font Awesome v5 and v6 - both Free and Pro - without having to manage the icons yourself as part of your project. You can pick whether to use a Font Awesome Kit, or use their CDN.
Here's a breakdown of how you can use each version and license:
- Use Font Awesome 5 Free - Use the CDN (no account required and free)
- Use Font Awesome 5 Pro - Use the CDN (subscription required) or a Kit (subscription required)
- Use Font Awesome 6 Free - Use the CDN (no account required and free)
- Use Font Awesome 6 Pro - Use a Kit (subscription required)
We've also added native support for some other popular icon kits:
- Feather Icons (opens new window)
- Ionicons (opens new window)
- CSS.gg (opens new window)
- Material Symbols (opens new window)
Performance#
A big focus on this release was on performance. You can now load a massive amount of icons for a field, with no real browser detriment thanks to some nifty techniques when it comes to rendering. Your icons are also cached from the file system, to improve I/O.
Handling over 100k of icons should be a breeze, thanks to:
- Moving from jQuery to Vue 3
- Using a virtual-scroller to only render DOM nodes within the viewport
- Caching large icon sets server-side, and client-side
- Lazy-loading fonts and sprites when the field has a value (to show the icon before opening the dropdown)
You may notice a slight delay when loading large sets (we're talking over 50k icons), which is really down to the JSON data from the server making its way to the field. But once the icons are loaded, they're cached client-side, and open instantaneously from thereafter.
Metadata#
Sometimes, your icon pack of choice - be it collection of SVGs or a Web Font - might come with additional metadata used for descriptions of the icons. For example, a heart icon could likely fit under multiple keywords like love, blood, medical, etc. Unfortunately, it's difficult to embed this extra information in the filename of a SVG, SVG Spritesheet, or Web Font. Icon Picker will only provide search results based on the filename of the icon.
This is where metadata files come in. Simply put, metadata is a JSON file that's a key-value of the name of your icon and keyword.
{
"heart": ["love", "blood", "medical"]
}
Here, you define the keywords (either as a space-delimited string, or an array) with a reference to the individual icon. Icon Picker will pick up this metadata file, and pull in any keywords from it to be used when searching for an icon.
Customisation#
You can now also customise the size of icons in the icon-picker, which is pretty neat! We've tried to optimise it for the best screen real-estate to readability, but you can experiment to see what works for you.
Final thoughts#
That wraps up the major changes for Icon Picker 2. Read through the full list of changes in our upgrade guide and get Icon Picker 2 (opens new window) for Craft 4.