loading...
Cover image for How to create an extremelly reusable Icon component with react-svg

How to create an extremelly reusable Icon component with react-svg

vtrpldn profile image Vitor Paladini ・2 min read

SVG can be super-duper fast and accessible you know that.

And the coolest thing about SVG in webdev is that CSS simply works with it, so you can do stuff like:

path {
  fill: red;
}

and bam, your icon is red.

Need it to be bigger or smaller? Well, the S on SVG literally stands for "scalable", so you can just go ahead and pow make your icons as big as your browser can handle.

svg {
  width: 33554400px;
  height: 33554400px;
}

However, we might have a problem here, this post is about React but individually importing SVG files in React is a pain... 😩

There's a better way

You can leverage the CSS styling features of SVG with React components by using a library called react-svg. This library works by fetching, caching and inlining your SVG icons so you only need to worry about styling them.

Here's the step by step guide on how to create an Icon component that, trust me, is a real pleasure to use.

1 - Create an /icons folder and stuff it with all your favorite icons

2 - Create an Icon component that wraps ReactSVG:

import React from "react";
import ReactSVG from "react-svg";

const Icon = (props) => {
  return <ReactSVG src="YOUR_PATH/icons/${props.name}.svg" />;
}

export default Icon;

3 - Import your Icon component and use it like so:

import React from "react";
import Icon from "./Icon";

const IconList = () {
  return (
    <div>
      <Icon name="user" />
      <Icon name="calendar" />
      <Icon name="phone" />
      <Icon name="email" />
    </div>
  );
}

export default IconList;

Can you see the beauty of it? No more fumbling with icon imports every time you need a new icon. Just add the file to the icon folder, pass its name as a prop to your brand new Icon component and call it a day.

Now, let's go a bit further with this Icon component thingy and make it even more useful.

Give it some style

Did you see how we are using the name prop to fetch the right icon file? We can do the same thing for picking the right color and size of that icon.

All we need is a CSS-in-JS library to act as a glue between our SVG files and our Icon component, we are using Styled Components in the example below but any other library would serve.

Here, take a look. The embed space is pretty limited so feel free to click the "Open Sandbox" button and play with it for a while, just remember to come back. 🙂

Pretty nice, huh? What I like the most about this approach is that after some initial setup, adding a new icon is as simple as dragging the SVG file to the icon folder. And being able to style it directly in the component props is definitely a plus.

So that's it! Thanks Harpal Singh on Unsplash for the cover photo.

If you have any questions about the example please share it in the comments!

Posted on by:

vtrpldn profile

Vitor Paladini

@vtrpldn

A software engineer that really likes working with user interfaces. Writes mostly JS at a small (but mighty!) Danish startup. Loves cooking.

Discussion

markdown guide
 

Was looking for this from long ago 😍

 

"extremely reusable" and "React" is a contradiction though because it's only usable in a React stack. React, although popular, can't come close to the level of reusability a standards-based solution like custom HTML tags or Custom Elements provides. React, Vue, Riot, etc. are wonderful for structuring your app and managing state changes, but little components like icons are best done with simple, lightweight solutions that aren't tied to a framework.

 

Hey, Jordan. I'm assuming in this article that the reader is already working on a React environment, but your comment made me realize that I should have made that more clear. Thanks for the feedback!

By no means anyone should import React exclusively to create a single icon component, you're absolutely right about that. But in the React context, I'd say these Icons are indeed very much reusable.