Icons Package

This package is in charge of storing, optimizing, and building the SVG icons.

Building

After the first install, the build script will automatically be run.

You can run this script manually:

npm run build -w packages/icons

This script does a few things in order:

• Cleans up the old temp/ and dist/ folders
• Optimizes the SVGs using svgo. The configuration for this step can be found in the svgo.config.cjs file
• Replaces all color tags using regex with the string 'colorReplace' in order to be replaced in the next step
• Convert the SVGs to components using svgr. The configuration for this step can be found in the svgr.config.cjs file
• Bundle everything together with vite

If you make changes to the SVG files you must run this script in order to see the changes locally. It will be run by the CI in any case.

Updating Icons from Figma

Instructions

When the designers update the icons, they will send you a zip file with all the icons (See this section if you need to export the icons manually from Figma).

Create a folder named icons under the src directory, and extract the zip with all the SVGs (with subfolders) into this new folder.

Then run the ingest script:

npm run ingest -w packages/icons

And finally run git add on the src/svgs folder to add the new icons:

git add packages/icons/src/svgs

Don't forget to run the build script after this step, in order to see your changes!

How it works

This script will:

• Delete the current src/svgs folder
• Flatten the directory structure, for example: src/icons/Arrow/Down.svg will become src/icons/ArrowDown.svg
• Copy over the new SVGs to src/svgs

Multicolored icons should already be in folder called src/icons/Multicolor and will be automatically handled by the ingest script.

Most of the icons should be the same as the ones in the src/svgs folder, so you will not see any differences. But the new and updated icons will be visible in the local-changes section in git.

Verify that the changes are correct and commit them, while being cognizant of breaking changes. If an icon's name has changed, or was removed, that is considered a breaking change. In that case, you should bump the major version of the package.

Exporting icons manually from Figma

1. Navigate to the Icons page of the Design System in Figma.
2. In the menu bar, click on File and then Export....

3. In the modal that appears, click the Export button.

4. A zip file will be downloaded to your computer.
5. Proceed with the steps outlined in the Instructions section.