I’ve been learning React for some time, but I haven’t had an opportunity to create something unique until now! I was implementing icons in an existing SharePoint-app, using Fluent UI design language. I started adding icons to the app, and our designer was letting me know, in no uncertain terms, how important these icons are for the user experience. While I’m working on this, I added the icons as requested to different parts of the app, and soon saw a lot of code duplication. That’s when the idea of a custom Icon component came to me. So I made one which takes an icon name with semantic meaning in the app as a prop, and rendering the selected icon where it’s used. Now, this gives us two things - for one; the same icon is used everywhere to illustrate the same thing. Second; if designers suddenly want an icon (or all of them!) replaced, there is a single place to make the change!
React is fun!