Quantum Icons

Installation

To install Quantum Icons, use the following Yarn command:

yarn add @auth0/quantum-icons

Export Icons from Figma

Identifying Environment Variables

Before exporting icons from Figma and updating Quantum Icons, you need to create an .env file with the following configurations:

FIGMA_API_KEY=<personal-figma-token>

To obtain the access token, follow these steps:

1. Go to Figma in the browser.
2. Navigate to Account Settings -> Account Tab.
3. Scroll down to Personal access tokens.
4. Generate a token and copy it.

Running the Generation Scripts

Once you have all environment configurations set up, to generate both svgs, from figma, and icons, from the svgs run the command:

yarn build:icons

This will run all the needed commands to pull the icons from figma and generate react components from them. The indiviudal commands are listed below:

use the following command to update/pull icons from Figma:

yarn generate:svg

This command will update all Figma icons with the new exports to the ./src/svg folder.

To generate react components from these svgs run the following command:

yarn generate:icons