The Icon Exporter is one of the most powerful Nucleo features.
To trigger the export window, select one or multiple icons, then click on the [Export] button or press Cmd+E on Mac (Ctrl+E on Windows).
Nucleo supports the following export options:
- SVG - single SVG files, image sprites or SVG symbols
- PNG - multiple resolutions and ready-to-use iOS + Android formats
- Icon Font
- JSON - a single file containing icons + metadata
- JSX - React friendly SVG code
SVG is the most popular icon format. According to your needs, you may want to export the icons as single SVG files, SVG sprite or SVG symbols.
The Single SVGs option exports each icon as a single SVG file. Optionally, you can:
- Set a custom size for all the icons exported.
- Make all icons responsive when used in coding. This option will remove the width and height from the SVG code so that icons will expand to fill the parent container.
- Remove inline colors, and customize them later directly in coding.
The SVG Sprite option generates an image sprite, which is a single SVG file containing all icons distributed in a grid layout. You can then import the image sprite in your web project, and use the CSS file generated by Nucleo to target specific icons.
Optionally, you can set a secondary color. This will automatically generate a clone of each icon, with the newly selected color.
The SVG <symbol> option is perfect if you want to export all icons of a project and include them in your design system. Nucleo generates the SVG file that contains all icons, along with the CSS and demo files to manage them.
Think of SVG <symbol> as an alternative to icon fonts, with the advantage of supporting advanced customization options like duo-tone icons and stroke values.
If you need to export a raster version of your icons, then the PNG option will come in handy! The advanced options allow you to set custom resolutions, or to use the Android and iOS presets.
The PDF option generates a folder containing all icons as separate PDF files. Optionally, you can set a custom export size.
The icon font format is super popular in web projects. Nucleo generates the font files, along with the CSS and demo files to manage the icons. The advanced options include adding metadata, editing metrics and creating Base64 encoded fonts.
You can use Nucleo to export icons with stroke values. However, this is an experimental feature. It requires us to run some extra steps to convert the icons to icon font. Specifically, we need to "expand the strokes" before starting the conversion.
Please note that if you want to preserve Unicode and class values, you should add the icons to a project and then export the project as icon font.
JSON files are the most versatile files when it comes to sharing icon sets with fellow designers/developers. They include the icons (SVG content) and additional metadata like set names and search tags.
The great thing about JSON files exported using Nucleo is that you can import them back, simply by dragging them over the app.
If you're working on a project that uses React, then the JSX option is a lifesaver! Instead of exporting all icons and then converting them into JSX files, Nucleo does the heavy work for you so that you can create icon components with ease.