A better way to export icons
What’s new in Nucleo v2.4.0 | nucleoapp.com
The Exporter has always been one of our killer features. The best thing about it: it’s not limited to exporting icons the same way you imported them (separate SVG files). You can generate icon systems (icon fonts, SVG sprites, SVG symbols…), and integrate them into your web/mobile projects.
With the version 2.4.0 of our app, we’ve decided to focus (almost) entirely on the exporter. We’ve introduced new formats (👏 hello JSX), and added tons of new options. 100% of what’s new in this version derives from the feedback emails and tweets we’ve received over the last months from our users. Thanks for helping us making Nucleo better! 🙂
The first time you hear about Nucleo? Learn more and download the app for free at nucleoapp.com
The Nucleo exporter
Here’s a list of the export formats and options supported.
Tip: to trigger the export window in Nucleo, select one or multiple icons, then click on the [Export] button or press Cmd+E on Mac (Ctrl+E on Windows).
Important! Please be aware that some CSS templates have been slightly modified. If you’re using our CSS generated files in your projects, make sure to check the changes (do not swap old files with new ones).
1. SVG — Single files
The most basic way to export icons. The Single SVGs option exports each icon as a separate SVG file. Handy if you want to share icons (although not the best way to share icon sets, more on this later).
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.
2. SVG Sprite
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:
- Edit the CSS class names.
- Add padding to each icon or use a custom grid layout.
- Add a secondary color. This will automatically generate a clone of each icon, with the newly selected color.
3. SVG symbols
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.
4. PNG
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.
5. PDF
The PDF option generates a folder containing all icons as separate PDF files. Optionally, you can set a custom export size.
6. Icon Fonts
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.
Optionally, you can:
- Edit the class names of each icon, as well as the base class name and the class prefix.
- Export Base64 encoded fonts.
- Edit metrics.
- Add metadata.
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.
7. JSON
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 (along with all the info associated to each icon — like search tags), simply by dragging them over the app.
8. JSX
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 in no time!
New syncing option: Microsoft OneDrive 🎉
Now you can use OneDrive to store your personal icon library and your team projects, along with Dropbox, Box and Nutstore.
New icons: Food and Emoji
Our premium icon library of 20K+ icons keeps getting better. We’ve just completed the update of the food icon category, that includes:
- ✅ 191 unique icon concepts
- ✅ 85 new icon concepts added with the latest update
- ✅ A total of 2060 assets across all styles and sizes
Next we plan to update the emoji icons. We’ve already started improving the existing assets. We’ll soon add new colored icons as well.
What about SVG patterns?
I know we promised a new icon category and export option. However, we had some issues while integrating SVG patterns in our app. Patterns require a different way to manage in-app previews. You have to “repeat” them to have a feeling of the final result. So we had to create a new page/template entirely (one for icons + one for patterns). Long story short: we’ve decided to postpone this feature, having more pressing features to develop in the near future.
What’s next?
Before moving to the next big thing (a new, smarter approach for Projects), we want to focus on some small changes and bug fixes in version 2.4.1. If you have suggestions, now is the time to share!
Feedbacks/suggestions? Feel free to reach out to us. We’re listening to your requests 😉
