SVG Iconset Cropper

SVG icon sets, like Material Design, have variable padding around their icons, which can make it challenging to create pixel perfect designs.

This tool automatically trims the whitespace from around a batch of SVG icons, using the method developed by the awesome svgcrop.com (source).

Usage

1. Get a batch of SVG files

For example, to trim the material design icons, download (or clone) the icon repo archive and extract it. Inside you'll find an svg directory.

2. Setup the cropper

Clone this repo and install the dependencies:

git clone https://github.com/jgillick/SVGIconsetCropper.git

cd SVGIconsetCropper

yarn install

3. Start the cropper tool server

yarn cropper --out "<PATH TO OUTPUT>" "<PATH TO SVG DIRECTORY>"

# For example
yarn cropper --out ./cropped/ ./MaterialDesign-SVG/svg

4. Crop ALL THE SVG

Cropping happens in the browser, so open your browser to http://localhost:8080/ and then press the Start button.

Now sit back and wait for the cropped SVG icons to fill the output directory.

Make an icon font

If you want to make an icon font with these SVGs, it's important that all SVGs are normalized to the same height; otherwise, pixel perfect designs can be challenging. I've found that Fantasticon works really well for this.

For example, following along from our Material Design Icons example above (change --font-types to whatever font file format you need):

npm install -g fantasticon

mkdir ./font
fantasticon  --normalize \
             --font-types ttf \
             --asset-types json \
             --name MaterialDesignIconsCropped \
             --output ./font \
             ./cropped

You can also use icomoon.io, however, it will not automatically normalize all icons to the same height -- which can affect pixel perfect designs.. Follow these instructions for icomoon.

RYRY1002/SVGIconsetCropper