Bob comes along and is searching for the loader icon by searching for Loader.tsx file assuming that icons are probably named according to their names on Figma. Let us say Alice downloaded loader.svg icon from Figma and created a component called Spinner.tsx in the React project because that name seems to make sense to Alice. Not every developer on the team will follow a consistent way of performing the above steps. □ The Problem Problem 1Įveryone has their own way of performing manual work. But first, let us explore why the above process can be a problem. Certainly, we could write some scripts here to automate much of the process. This was a slow, repetitive, and error-prone process. Exporting the React icon component from the index file.Exposing props that parent component can pass (color, size, etc).Copying and pasting the SVG code into the component file.Creating a React component file and appropriately naming it.Exporting the icon as SVG format from Figma.Previously we had to go through the following tedious and manual process of adding an icon from Figma to our React project: Some amount of automation can always make the lives of Frontend devs on your team simpler and save precious time.Īt Certa, our designer maintains over 150 SVG icons on a Figma board, with new ones coming every now and then. Maintaining icons in a React project can be a mess.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |