Updating icons

Icons can be automatically generated from the ADS Figma file. The generation process extracts SVGs from a zip file, converts them to React components, and builds the package.

Prerequisites

1. Open ADS Figma  file.
2. Select all icons
3. In the right side panel, export all icons
   • Export > + > 1x svg > Export x layers
4. Save the .zip file (any name ending in .zip works)

Generating icons

1. Put the downloaded .zip file in packages/react-icons/input
2. Run yarn workspace @alza/react-icons gen

The script will automatically:

• Extract SVG files from the zip
• Generate metadata for the icons
• Normalize icon names to PascalCase
• Validate the SVG files
• Generate React components
• Update package exports
• Generate the ICONS.md documentation
• Clean up the zip file and extracted SVGs
• Build the package

What gets generated

• lib/icons/*.tsx - React icon components
• lib/icons/index.ts - Barrel export file
• ICONS.md - Documentation listing all available icons
• dist/ - Built package ready for publishing

Troubleshooting

No zip files found

Make sure you placed the .zip file directly in packages/react-icons/input/.

No SVG files found

The zip file should contain .svg files. The script handles nested folder structures from Figma exports.