I'm currently using FontAwesome at work, but I've run into a few frustrating issues. My setup involves React (with Vite), TypeScript, and FontAwesome 6. Unlike my previous experience with FontAwesome in Angular where I could just use a CDN link, the React setup seems to require installing packages and importing icons for every component. This has led to build issues, and if FontAwesome experiences downtime, it affects our builds.
I chose FontAwesome due to my past experience with it in Angular, so it provided a consistent base for icons without too much editing. It's crucial for me that the icons scale well with text, have a broad range of options, including custom icons. Can anyone recommend any better solutions, or a more efficient way to use FontAwesome in React? Also, if you're familiar with Lucide or MDI, how do you manage custom icons?
3 Answers
I've been using Lucide icons, and I really enjoy the developer experience; they look great in React projects too! Just remember, the icon library isn't as extensive as FontAwesome's. But the tree-shaking is way cleaner in Lucide, which helps with performance. Plus, you can easily import only what you need.
If you're looking for something different, I've had good luck with heroicons. They fit nicely into my workflow, though I didn't do a ton of research before diving in. Just a straightforward solution that works!
What do you do for custom icons?
Bootstrap icons could be a solid alternative. They're open-source and simple to implement. I personally moved away from FontAwesome because their installation process got too complicated; it was a lot easier to just embed fonts before!
The install used to be so easy! I don’t understand why they have made it so annoyingly complex!
What do you do for custom icons?