Okay, so today I’m gonna share how I tackled transferring icons in one of my recent projects. It wasn’t super straightforward, but I figured it out, and hopefully, this helps someone else out there.
It all started when the design team revamped the app’s look. They sent over a bunch of new icons in SVG format. Cool, right? Except, the old icons were a mix of PNGs and some older, less-than-perfect SVGs. The goal was to replace everything with these crisp, new SVGs.
First thing I did was just try a simple find and replace in the codebase. Searched for the old icon file names and swapped them with the new ones. Easy peasy, right? Nope. Some icons were used directly in image tags, others were embedded in CSS as background images, and a few were even used inside React components as inline SVGs. It was a freakin’ mess.
So, I took a step back and decided to be more systematic. I made a spreadsheet. Yeah, I know, sounds boring, but it helped. I listed out every single icon used in the app, the file path of the old icon, and the file path of the new icon. Then, I added a column for “Implementation Type” to track how each icon was being used (image tag, CSS, inline SVG, etc.).
Next, I tackled the image tags first. These were the easiest. Just updated the `src` attribute to point to the new SVG. Done and done.
Then came the CSS background images. This was a bit trickier because some of the old icons were using different sizes or had some weird positioning. I had to go through each CSS rule and adjust the `background-size` and `background-position` properties to make the new icons look right. Used the browser’s developer tools a LOT during this step.
The inline SVGs were the real pain in the butt. These were scattered throughout the React components, and some of them had custom styling applied directly to the SVG elements. I ended up having to copy the SVG code from the new files and paste it into the components, then reapply the custom styling. It was tedious, but I got it done.
Here’s the key takeaway: Be organized! That spreadsheet saved my sanity. Without it, I would have been lost in a sea of code, constantly wondering if I’d missed an icon somewhere.
Another tip: Use your IDE’s search and replace features wisely. Learn how to use regular expressions to make your searches more precise. It can save you a lot of time.
Finally: Test, test, test! After I thought I was done, I went through the app and clicked on everything, just to make sure all the icons were displaying correctly. I found a few more that I’d missed, but I was able to fix them quickly because I had my handy-dandy spreadsheet.
So yeah, that’s how I transferred icons. It wasn’t glamorous, but it got the job done. Hope this helps you out!
