The "Icon properties" hack: Manipulating icon component properties
The "Icon properties" hack: Manipulating icon component properties
When starting any project I have this “Icon properties” hack that I implement, which helps me swap icons and change sizes directly in the component properties panel. It improves workflow, and makes my job a tad easier. So this is how it works.
Setting the scene
For any project, I create an icon library beforehand by importing a set of free icons.
All icons in the set, are standalone components. I bulk-select them all and hit “create multiple components”. Now, this is important. The icon library is not a “component set”, meaning they are not variants. Every icon is a component.
The next step is to ensure that the “vectors” in all icons have the same name. It could be any name, ensure all have the same name. Also, if there are 2 or more vectors for an icon, flatten them so they have only one vector. This is important and I’ll explain why in a bit.
In the icon set, create a “placeholder” icon. You could create an icon for this, or use an icon from the icon set as a placeholder. I duplicated the heart icon in the set to make it a placeholder.
Creating the “Master icon”
I would grab an instance of the placeholder icon and make that a component again. I would rename this component to “Master-icon” (or whatever you want to name it).
Creating an icon swap with the Master icon
After creating the Master icon, I select the “placeholder” instance from my Master icon and apply an instance swap. When creating the property, I also ensure to assign my “preferred values” to icons.
Now that this is done, I could grab an instance of the Master icon and swap it with any other icon.
Remember I had created all icon vectors with the same name. That is done to ensure colour overrides are applied to the swapped icons. Doing this would ensure that any icon swapped would inherit the colour of the Master icon.
Creating “size” variants for the Master icon
After this, I add the “size variant” property to the Master icon. I create variants of different sizes - 16px, 20px, 24px, and 32px.
Both the icon-swap and the size variants together make the workflow a lot smoother. Not only can I swap icons to my liking, but also change sizes accordingly.
Adding icons to components
When creating components, make sure to add the instance of the Master icon, so you can quickly swap icons or change sizes in the property panel itself.
And… we are done!
This is a small yet smooth hack you could use for any project.
