When creating SPFx solutions, you will sometimes require base64-encoded images. A common scenario is when you create a ListView Command Set extension. And then you look at Office UI Fabric Icons and think how nice it would be if you could easily get the images as base64-encoded strings to use on SPFx solutions.
And today I found a great tool to do this!
While searching for a tool/website to convert the icons, I stumbled across this amazing blog post: “I Made a Tool to Generate Images Using Office UI Fabric Icons“
And on the post, there is a link to the great tool on codepen.
In this example, I created an icon for an SPFx ListView Command Set that uses 16×16 px icons from Fabric React.
As you can see from the image, all you have to do is copy the Data URL field and paste that value on the manifest.json file of your solution.
Unfortunately the tool seems to have a limitation and it doesn’t give you the option to have transparent background, so be aware when selecting a background colour.
Update: I am glad to confirm that I was wrong and the tool does in fact support transparent backgrounds! Just use ‘transparent’ as the value for the background colour as per the image above.
Hope you find this helpful.