Deriv Icons

This project will export SVG, Sprite, React Components from a simple Figma Icon project.

Prerequisite

We use @figma-export to export Figma Components so Please read their docs and try to get comfortable with their concepts.

With @figma-export we export to handle SVG creation for each Figma Component and then with transform-svg-with-svgo we optimize the exported SVGs. this is a transformer and you can add/remove/update SVG attributes with it.

Out Putters

• @figma-export/output-components-as-svg We use this to generate SVG files, you can check them in svg folder.

• @figma-export/output-components-as-es6 We use this to generate ES6 modules for SVGs. you can check them in src/es6 folder.

• @figma-export/output-components-as-svgr We use this to generate React Components based on transformed ( optimized ) SVG files. you can check them in src/react folder.

• @figma-export/output-components-as-svgstore We use this to generate SVG Sprite based on the transformed ( optimized ) SVG files. you can check them in sprite folder.

Pre-installation

• node >=16.16.0
• npm >=7.21.0
• git (for contribution)
• Figma Token ( Check This to set it up for yourself )
• Figma File Id, for now you can use XegjSl9fWXH2O7Mxo0Ctie
• Figma icons page, for now you can use deriv-icons

Quick start

1. Enter project directory

   cd deriv-icons

2. Setup .env file create a .env file inside deriv-icons folder with this content:

   FIGMA_TOKEN=YOUR_FIGMA_TOKEN
   FILE_ID=XegjSl9fWXH2O7Mxo0Ctie
   ICONS_PAGE=deriv-icons
   

3. Install your dependencies:

   npm ci

4. Export:

   npm run export

5. Run Storybook

   npm start

Figma Components Conventions

For now we don't have any conventions yet, but after coordintating with design team will update this section.

Build and Publish @deriv/icons Package

We use rollup for package bundling, in order to build the actual package you do the following:

1. Setup .env file Configure the environment variables of the platform with these:

   FIGMA_TOKEN=YOUR_FIGMA_TOKEN
   FILE_ID=XegjSl9fWXH2O7Mxo0Ctie
   ICONS_PAGE=deriv-icons
   

2. Install your dependencies:

   npm ci

3. Export:

   npm run export

4. Build Storybook

   ```sh
   npm build_and_publish
   ```
   the built version of the package will be in `dist` folder, in case you wanna run some auditing tool on it.
   

   Note: You have to change the version field in package.json file. please use semver versioning

Build Storybook

Since we storybooks as visual testing of components for deployments on vercel, etc you can do:

1. Setup .env file Configure the environment variables of the platform with these:

   FIGMA_TOKEN=YOUR_FIGMA_TOKEN
   FILE_ID=XegjSl9fWXH2O7Mxo0Ctie
   ICONS_PAGE=deriv-icons
   

2. Install your dependencies:

   npm ci

3. Export:

   npm run export

4. Build Storybook

   npm build-storybook

The built static release of storybooks will be under storybook-static folder, you can use this folder for deployment.