Mezze Pro – Convert and Export Icons as React Components

Sync icon components in Figma to React components in GitHub.

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 GitHub/Bitbucket/GitLab repos.

⚡️ Benefits:

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

🚀 10 Minute Set-Up:

• Generate a GitHub fine-grained Personal Access Token with the "Contents" repository permission set to "Read and write"
• If using Bitbucket, generate a Repository Access Token with the repository:write permission.
• If using GitLab, generate a Personal Access Token with the api scope.
• Install Mezze and open the plugin
• Head over to the "Settings" tab, enter the Access Token created above, the Github/Bitbucket repo owner/organization name, and the Mezze Pro License Key.
• Save your settings and return to the Inspect tab.
• Select icons you wish to export. Icons must be Figma Components or Instances.
• 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.

🛠️ Try for free:

• Try Mezze for free with Mezze Lite!
• Mezze Lite allows you to export up to 5 icons at a time, while Mezze Pro has no export limit (up to 5MB of icons at a time).
• Mezze Lite does not have the ability to replace SVG attributes (e.g., changing an icon color to "currentColor" in order to inherit from CSS text color)

ℹ️ Note on batch conversions:

• Icon conversions are resource-intensive, and it can take up to 1 second to convert an icon into a React component. For an library of 100 icons, it could take up to 90 seconds to complete the conversion.