Overview

The design system provides an icon component, the workflow with this component looks like this:

<aside> ➡️ Figma → Export and packaging of icons into a bundle → Use in the application

</aside>

1. The icon source files are located on the corresponding page in Figma: https://www.figma.com/file/S7TzzdQzTkNTBejt43w2wHwN/MC-Icons
2. After making changes in Figma, the author uses a figma plugin to create a PR with a new version of the icon bundle in the repository https://github.com/manychat/icons
3. Merging the created PR into the master branch triggers:
   1. Export of icons from Figma in SVG format
   2. Conversion of the resulting files into React components
   3. Packaging of components into a bundle and updating the version of the NPM package with icons https://www.npmjs.com/package/@manychat/icons
4. The version of the NPM package is updated on the application side

The current list of icons can be viewed at:

• Figma: https://www.figma.com/file/S7TzzdQzTkNTBejt43w2wHwN/MC-Icons
• ManyUI: https://design.manychat.com/components/icon

Updating/Installing the Required Version

After making visual changes to the icons or adding/deleting new ones, the author updates the version of the icon package in the NPM repository. To make it easier to update/install the required version of the icon package dependency within the application, the icons:install command is available, which

• Installs the specified version of the package
• Updates package.json and package-lock.json
• Creates a commit with changes to the package version

Example of package version installation: