Changes made in the new app's SVG editor can be copied to other glyphs via the Edits tab of the Batch panel. This can be especially useful for batch-editing strokes, colors, padding, or adding a common background shape to multiple glyphs. The following video shows this feature, plus the usage of the Color Shifter tool under the Colors tab for adjusting all colors.
Two new formats where added to the new app's Quick Export
section: SVG
<symbol>
and SVG <use>.
This allows you to copy icons to clipboard as these formats. If you already
have an existing set of symbol definitions in your code, you will likely find
these new formats useful. The Quick Export tab is available under the
Export
panel, in both the Glyphs
pane as well as the Library pane.
IcoMoon's vector editor is SVG-first, meaning it doesn't use a different internal vector format. As a result, there is no discrepancy between what you see and what you get. Furthermore, the editor can detect whether a Bézier path is actually a circle/ellipse or a polygon, as shown in the following video. When you edit a path, the editor would automatically convert it to a basic shape if possible, resulting in a cleaner and simpler SVG code.
Of course the reverse is also possible. You can turn a shape to a Bézier path by "Expanding" it. Press the Expand Shape or Stroke button in the Properties tab or search for "expand" in the command bar to apply it on your selection.
A new tool was added to the toolbar of IcoMoon's vector editor in selection mode. It lets you round coordinate values. This can be used for snapping points to the grid as well as reducing the size of SVGs.
You can bring up this tool by pressing Shift + R. A
number field would let you specify the threshold for rounding. For example, If
you enter 0.5, all values would be rounded to the closest
multiple of 0.5. In this example, a coordinate like
1.3479 would become 1.5 and 3.85102
would be rounded to 4, resulting in a cleaner and shorter SVG
code.
This video features several techniques shown previously, for drawing a rocket icon in IcoMoon's vector editor.
You might notice that we are holding Alt/Option before dragging a point on the paths that were duplicated and flipped. Holding Alt before dragging a point allows moving the entire shape while snapping is only enabled for that point. On the other hand, if you hold Alt after you start dragging a shape, a duplicate would be made.
This video highlights path extension using the pen tool for turning a quarter of a circle into a droplet. The resulting path consists of a single segment.
The path is then duplicated and expanded/outlined for offsetting and adding a parallel curve inside the droplet.
In this video, a new blank glyph with a size of 16×16 is added first. It is then resized to 24×24 in the vector editor.
Using the pen tool, a single curve is drawn and then flipped horizontally. The resulting two paths are then joined together to form the heart icon.
This video shows basic usage of the pen tool for drawing a grid-aligned flag icon in IcoMoon's vector editor.
After drawing the first curve, it is dragged while holding Alt/Option in order to make a duplicate of it. This works when dragging the path itself. Dragging control points of the path while holding Alt has a different effect and won't make a duplicate. You could also duplicate your selection using the command bar (search for "duplicate") or using the copy and paste buttons in the toolbar.
This video demonstrates how you can use the rotation tool, repeating actions, and the union boolean operation to draw a simple gear icon in the SVG editor.
Holding Alt when using the rotation tool would make a duplicate while holding Shift snaps the rotation angle to multiples of 15 degrees.
This video shows how you can draw a pixel-fitted cloud icon in the SVG editor by rounding squares, joining points, extending and trimming paths.
Notice that the pen tool can be used for extending a Bézier curve beyond its default endings without adding extra points.