Miro Design System Icons

Adding a new Icon

The process of adding a new icon is the result of the collaboration of the design and development team. For this to happen follow this procedure:

1. The designer should create a new Figma file including the new icon by following this guideline: MDS - System Icons Library Figma file, which includes a template with all steps needed to easily create the new icon.
2. Once the file is ready, the designer should notify the Miro design system team so they can approve and include changes into the Figma root file containing all icons.
3. Finally, the development team takes over and runs the synchronization process, where the latest changes performed over the Figma root file are downloaded into the repository accordingly.

Synchronizing icons

Figma is the chosen tool to collaborate between designers and the DS team when it comes to icons. It also serves as a source of truth, therefore it is important to keep in sync the DS icons package with it, right now the process is manual, and it can be done by executing this command in the root repo:

pnpm sync:icons

The execution of this command does the following:

• figma-sync: runs the figma-sync command to obtain all icons coming from the specified figma file and store them in svg format inside svg folder. You can go in-depth about the synchronization process here.
• svg-to-react: runs the svg-to-react command to take all svg files and create their ccorresponding react components.
• changeset creation: generates a changeset file detailing all the changes with the proper version (Major, Minor, or patch).
• git add chages: all changes resulting from the previous two steps are staged.
• git commit changes: changes are committed under a specific message.

Figma synchronization

The execution of the figma-sync command does the following:

• Removes all the content inside svg folder.
• Icons content and metadata is obtained via Figma API.
• Once the content for all the icons is available, SVGO is applied on top to perform some optimizations and replaces colors to currentColor prop.
• Icons are stored based on different folders based on size (svg/24, svg/16).

For technical details, please check it here.

SVGR icon generation

To convert the svgs obtained and formatted by figma-sync into react components, the utility SVGR takes care of it, and helps to automate the process. Overall the only thing that needs as an input is the path where the svg files are stored, and the file where the react auto-generated components should live.

The overall process can be started by using the following command svg-to-react, which does the following:

• Removes all icons from the react folder.
• Using the SVGR cli, it reads from the svgrrc.js file where some configurations are specified, such as the paths where templates to generate icons and the index file are, as well as the attributes to be kept inside icon react components.
• SVGR takes all svgs stored inside svg/24 folder, and based on the icon template templates/icon.js. It creates the content for the icon react component and stores it inside react folder.
• The components generated extend all the DS capabilities including stitches and tokens. Moreover, it provides the component with the size attribute.
• Finally, SVGR creates an index file inside the react folder where all generated icons are exported.