Exporting SVGs from Sketch into React

Peter Ajtai
Sep 5, 2018 · 4 min read

I wanted to quickly jot this down in case it saves someone time. Expert users of Sketch will probably not find this interesting, but as a coder, it took me a fair bit of Googling to find all this out. The post describes how to export individual items to SVG and use them in React using Sketch 51.2.

I’ll go through step-by-step how to export one symbol from a combined symbol. I’ll use an example of a combined symbol of a triangle and a circle in an artboard. Our goal is to export the code for the circle.

A Combined Shape where we can’t select just the piece we want

1: Isolate what you want to export

Selecting “Detach from Symbol”

If you want to export an item, click on it. If only what you want to export is highlighted, you are good to go. If a larger symbol is highlighted — like in our example, right click and select “Detach from symbol.” Now you’ll be able to select just the bit you want using either the mouse or by expand in the layer sidebar on the left. It’s important that your bounding rectangle surrounds your shape nicely, or you’ll end up with an SVG with unneeded transforms.

Now we can select just the circle

2: Export

The quality of the exported SVG code will be greatly simplified — and thus improved — if you install the SVGO-Compressor.

Check the plugin is enabled with ‘Command — ,’

For example exporting a simple stroke with a circle looks like this without the SVGO plugin:

With the plugin, the code is simplified to a much more readable snippet with fewer unneeded transforms:

Once you have the part you want to export isolated, click in the lower right where it says “Make exportable.” You can also right click and select “SVG Code”.

3: Update the colors

At this point you’ll have an SVG file. If you want to use your file in a web design, update the colors you want to control with CSS and swap out the color code with currentColor . This will allow you to use CSS color to control the look of the SVG.

4: Import into React

You can manually import an SVG into a React component or you can use a tool like SVGR. There are multiple plugins to consider. Your mileage may vary. I usually find it more reliable to just code the custom components by hand. Essentially you’ll want to change any attributes with colons or dashes to be camel cased. You’ll also want to merge props passed to the custom component into the SVG element using ...props . This will allow you to do things like <CircleIcon className="fancy" style={circleStyles}/> . Without ...props , the attributes put onto the component would not get passed into the SVG.

You’ll also want to remove the hard coded width and height attributes.

For example, our circle would has the following SVG file:

To turn the above into a custom component looks like:

Notice that the fill color is hard coded above. We could make that the currentColor as well. With just the stroke set to currentColor , only the outline can be changed with CSS and the fill will be constant.

Debugging:

One strange thing I’ve noticed is that sometimes your React SVG can have some odd looking striping in them. Adding an empty <g/> tag before the closing </svg> seems to fix this.

Another thing that can cause odd rendering are the id s created by sketch. These are not guaranteed to be globally unique, and if you are using multiple SVG components on the same page, there can be interference. Make sure you make your ids unique:

For example in the example above, notebook- is generated by Sketch based on your naming in the file. Make sure these are unique, and modify as needed.

The above will allow you to quickly turn Sketch designs into responsive site designs with SVG icons.

Solid Digital

Creating digital experiences that transform our physical world.

Peter Ajtai

Written by

Solid Digital

Creating digital experiences that transform our physical world.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade