Do you manage SVGs well in React?
A better way to organize SVG icons in your application
Almost every app uses some kind of icons to provide visual attention to the functionality of the application. And when it comes to icons, SVG (Scalable Vector Graphics) icons are the best options to use as they are scalable, remain crisp and clear irrespective of the dimensions, tiny in size, and styleable.
If you work in React, I have a better way that will help you to organize SVG icons in a clean and controlled way.
Let’s start 🚀
We will create a single component called Svg, that will have all the icons for our app and use props to get the desired icon and control its attributes.
We have our Svg component ready. Now, we need a way to tell this component to return the icon that we need to use. To make it happen, we will define a prop called icon. The icon prop will be equal to the svg icon that we want to use.
Let’s update the Svg component to consider this icon prop and return the corresponding icon —
Awesome! Now we can use the Svg component to get the required icon —
Cool! but, we don’t have control over the icons 😕
What if the lock icon needs some custom width and height? Or we want a green bell icon?
It’s a common requirement that we want to give custom dimensions or a different visual appearance to icons. If you see our svgs, they have hard-coded width and height values of 24 and stroke color black (#000). Let’s use props to make them dynamic —
Great! We have more control over our icons and we can make them change using prop —
All good but need to pass width, height and stroke props on every Svg component 😐
Since width, height and stroke are coming from props, the Svg component expects them to be defined every time you use it.
To solve this, we will use defaultProps property provided by React. The defaultProps property in React component is used to set default values for the props argument. We will set the default props for our icons so that if we don’t pass all the props, default ones would be considered by the Svg component.
Awesome! A single component for all icons 😍
I like this approach as all icons reside in a single place and we can control the icons as per the requirements. I recommend you to check out the final code and live demo of this code in the sandbox attached below.
You made it to the end! Thanks ✌️
About me —
I am a front end developer building conversational experiences at Active.Ai, working mostly with React ecosystem.
I do pet projects and blogs whenever I get time. You can visit my website to have a look at my work. For projects, you can check my GitHub. I also share my front end journey on my Instagram page, madsemicolon. Do check it out.
Other popular articles —
