Mezze – Convert and Export Icons as React Components

About this plugin

It's a chore keeping icons updated cross-functionally. Mezze allows you to convert and export icons as React components, and pushes changes directly to your Git repos.

See Mezze in action 🎬

⚡ Benefits:

1. Designers no longer have to export icons from Figma every time there are changes or additions.
2. Devs save time creating React icon components, copying-and-pasting SVG code, and manually exposing props to parent components.
3. Designers and devs can cross-reference an icon in production directly from Figma via Mezze Inspect.
4. Component names in Figma match those in React, preventing duplicate icons from being added to the codebase.
5. Unified React props across all icons.

🚀 10 Minute Set-Up:

1. Generate a GitHub fine-grained Personal Access Token with the "Contents" repository permission set to "Read and write".
2. If using Bitbucket, generate a Repository Access Token with the repository:write permission.
3. If using GitLab, generate a Personal Access Token with the api scope.
4. Install Mezze and open the plugin
5. Head over to the "Settings" tab, enter the Access Token created above, and enter the Github/Bitbucket/GitLab repo owner/organization name.
6. Save your settings and return to the Inspect tab.
7. Select icons you wish to export. Icons must be Figma Components or Instances. Mezze Lite allows you to export up to 5 icons at a time, while Mezze Pro has no export limit.
8. Icons will be added to a new GitHub branch. In the Export menu, you'll be able to enter the repo, icon directory, branch name, as well as a commit message for your changes.

💖 Love Mezze? Let us know so we can keep improving your time here on Figma.

1. Give Mezze a Like
2. Drop a comment below
3. Share

Benefits of Mezze Pro

1. No export limit (up to 5MB of icons at a time)
2. Attribute replacement config (e.g., changing SVG stroke color from #000 to currentColor)