Easy way to make reusable React components out of SVG without fancy tooling - just React, ReactDOM, and JSX.

You're working in React, just got an SVG, and want to use it in a project.

How do you approach it? Make it a component!

What are the benefits? You'll be able to reuse SVG in different React components, and you'll also have control over its properties. Also, it's easy.

So let's get started.

What are we building?

We'll be building a small SVG component. We'll be able to control its size, color, and gradient color. The final effect is just two files - a standard HTML file and one SVG React component.

We'll use the simplest tools possible - React, ReactDOM, and JSX. No need to use any boilerplate or anything fancy - we'll add Babel only for JSX.

Setting up the project

To set up the project, we just need an HTML and an SVG to convert to a component. The HTML:

And the SVG we're using. Remember that you don't even have to add the SVG icon to the project; you can convert it to the React component using an online tool.

Our goal is to create the component.js file with the flexible SVG component.

Converting SVG to a component

You can convert an SVG to a component using an online tool like svg2jsx, or use SVGR, which may be used as a Node library, CLI tool, a webpack plugin, or even Visual Studio Code extension.

As it is a one-off, I used svg2jsx.

Your tool of choice should return a neat React component. So far, so good; we've already got a working SVG component. Now it's time to make it more flexible.

We'll make the component accept three props: size, color, and gradientColor. We'll also add some pretty defaults in case someone forgets to set the props.

The two last lines will render three icons; you don't need to worry about them.

So we've got an Icon component out of SVG. It accepts three props and works just fine. Or almost fine. The problem is every Icon has this same gradient color, even if they have different gradientColor values.

Fixing gradients

What is the problem with gradients? If you look closely, you'll see that the gradient is defined between lines 12 and 22. And the gradient has ID:

<linearGradient id="linearGradient-1">

That ID is later used in line 30:

<path fill="url(#linearGradient-1)">

So in our code, React creates three Icon components. And each has its own definition of linearGradient with identical ID. But as IDs have to be unique, only the first linearGradient is used. Ale others are ignored, so every Icon gets the gradient that was defined first.

To fix the problem, we'll add unique IDs to our gradients. At least a unique ID for each color. To do it, we can use the color hex as an ID. The final code:

Now we've got a fully working, flexible component made out of SVG.