Diagonal Reflection

While using the new SVG editor for designing new icons (coming soon!) we realized that besides vertical and horizontal reflection, diagonal reflection comes up rather frequently. In some slanted symbols (e.g. rocket, pen, broom, wrench) you would usually draw a part of the shape that lies on one side of the diagonal line and then need to reflect it diagonally. This was not very straightforward to do; so we added new diagonal reflection buttons for such scenarios.

The following is an example of drawing a wrench icon using diagonal reflection.

Reflection operations come with intuitive keyboard shortcuts worth mentioning:

  • Shift | → Horizontal
  • Shift _ → Vertical
  • Shift Alt / → Diagonal (45°)
  • Shift Alt \ → Diagonal (135°)
  • Shift A → Anchor point
The last operation listed above (reflection over the anchor point) was removed from the Properties tab in favor of the diagonal options; but it is still available through the shortcuts panel or the command bar.

New Feature: Overview

A new section called Overview was added to the vector editor's Style panel which lists SVG properties (such as fills, strokes, etc.) by their value. You can find this new section by deselecting everything (Esc) and referring the Properties tab of the Style panel. Alternatively, search for "overview" in the command bar.

Each value listed under Overview appears next to a button for selecting all layers with a matching value. This allows selecting layers by their color or other attributes. Editing the value itself would change it in the entire SVG. These changes are repeatable through the Edits tab of the Batch panel.

As an example, if you have an icon set that incorporates two stroke widths of 1px and 2px per icon, you could change all strokes proportionally in one glyph and then repeat this change across the whole set, as shown in the following video.

The following attribute values are currently listed under the Overview section: fill, stroke, stroke width, line cap, line join, and opacity.

Drawing a Moon & Sun Icon

This video shows how you can draw a simple moon/sun symbol in IcoMoon's SVG editor. You could use this icon for color scheme toggle buttons.

Some of IcoMoon's hotkeys are inspired by Vim. This video shows using Dot for repeating the last action in the vector editor.

Support for currentColor with transparency was recently added and we are using it for the fill in this video.

New SVG Loading Spinners

Orbiters is a free set of animated SVG loading spinners. 21 new spinners were just added to this set, which you can see in the following video.

The great thing about SVG animations is that they are self-contained and have no CSS dependency. You can copy any of these spinners with a single tap in the library and paste them in your HTML or anywhere else SVGs are supported and they will just work.

SVG Masks

SVG masks allow making parts of the graphic transparent in a reversible way, without having to use the subtraction boolean operation. Masks are defined using the <mask> element. This element can contain typical SVG shapes or paths. It should also have an id attribute. The mask can be applied to other elements by referencing its id in the mask attribute: mask="url(#id)"

By default, the luminosity of the contents of the <mask> element determine which parts of masked elements remain visible. In other words:

  • White → Visible
  • Black → Invisible/hole
  • Empty → Invisible/hole
  • Gray  → Semitransparent

The new app's vector editor was recently updated to support making and applying masks. This can be done both using the command bar and the Combine tab of the Layers panel as shown in the following video.

Repeatable Code Edits

IcoMoon's vector editor features a code editor which reflects changes made in the visual editor (and vice versa). Until now, editing the code would reset the entire SVG. This meant that these changes were not suitable for batch editing. This is no longer the case in the latest version of the app. Code editing now records the difference between the edited SVG and its previous state. This difference can then be repeated on other parts of the same SVG using the Repeat Last Action command with hotkey Dot, or repeated on other glyphs using the Batch panel.

Batch Editing Icons

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.

Copy as <symbol> and <use>

Two new formats were 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 view as well as the Library view.

Shape Detection in Vector Editor

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.

New Tool for Rounding Coordinates

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.

Drawing a Rocket Icon

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.