We will use figma-api-exporter for this purpose.
FIGMA ICON DOWNLOAD
The metadata will contain S3 URLs of all the icons which can be used to download their corresponding SVG code. The first step in the script would be to fetch the metadata of icons from Figma. Src/icons/index.tsx index file that exports all icon react components from components/ directory Setup Src/icons/svgs/ contains SVG files that are not in Figma but also need to be converted to React components. Src/icons/components/ will contain all our generated react component files Src/generate.ts file is the primary script where a majority of our logic would be. │ │ ├─ components / (all generated React icon components) We'll be using the directory structure given below to organize our code: icons -generator /
FIGMA ICON INSTALL
FIGMA ICON CODE
- transforming SVG code into React components.figma-api-exporter - for fetching icons data from Figma.The script has been implemented using Node.js with TypeScript and it will make use of the following libraries: Here is a CodeSandbox for you to view the source code and run it yourself: Create an index file that exports all the icon components.Generate React components for each icon which expose common props with the same defaults.Load SVG icons added manually into a specific folder as an additional source.The new package would contain a script that would: Not a problem, we can also load SVGs icons into the script from a specific folder as an additional source. Maybe not all the icons you need in your project are on Figma. The proposed idea was to create a new package ( in the monorepo specifically catering to icons and automating as much of the icon component generation process as possible. Previously it housed the icons too, but it didn't quite feel like the right home for it. One such package is called blocks ( It houses the design system/building block components of our application UI such as the button, menu, tooptip, etc. Our frontend codebase is a monorepo housing various packages each having its own special purpose. This had led to unpredictable behavior when using icons and unexpected bugs started haunting the UI. color) was set to a hex value and in others set to currentColor. In some components, the default value of a prop (e.g. color and size) were added, and in some, it wasn't. Problem 2Īnother issue was that of inconsistent props of icon components. This will lead to code duplication unknowingly, which is never good. Now we have two icon components named differently, but having the same code. But Bob doesn't find the icon, so he creates a new icon component name Loader.tsx from loader.svg. 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.
FIGMA ICON MANUAL
🔎 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 kommentar(er)
