Exporting SVGs from Sketch into React
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.

1: Isolate what you want to export

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.

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

For example exporting a simple stroke with a circle looks like this without the SVGO plugin:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="106px" height="106px" viewBox="0 0 106 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>Oval</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Oval" transform="translate(1.000000, 1.000000)" fill="#D8D8D8" fill-rule="nonzero" stroke="#979797">
<circle cx="52" cy="52" r="52"></circle>
</g>
</g>
</svg>With the plugin, the code is simplified to a much more readable snippet with fewer unneeded transforms:
<svg xmlns="http://www.w3.org/2000/svg" width="106" height="106" viewBox="0 0 106 106">
<circle cx="52" cy="52" r="52" fill="#D8D8D8" stroke="#979797" transform="translate(1 1)"/>
</svg>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:
<svg xmlns="http://www.w3.org/2000/svg" width="106" height="106" viewBox="0 0 106 106">
<circle cx="52" cy="52" r="52" fill="#D8D8D8" stroke="#979797" transform="translate(1 1)"/>
</svg>To turn the above into a custom component looks like:
import React from 'react';
export const CircleIcon = (props) => (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 106 106">
<circle
cx="52" cy="52" r="52"
fill="#D8D8D8" stroke="currentColor"
transform="translate(1 1)"/>
</svg>
);
export default CircleIcon;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:
<mask id="notebook-b" fill="#fff">
<use xlinkHref="#notebook-a"/>
</mask>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.

