Mastering dynamic icon colors: Harnessing SVG in React

Ever wished you could change the color of your SVG icons on the fly without bloating your React app? This blog explores how to harness the power of SVGs in React to achieve dynamic icon colors, keeping your application sleek and lightweight.

What are SVG files?

Scalable Vector Graphic files are a type of graphic file used to create images and graphics on the web. They are composed of vector shapes, lines and curves that can be scaled to any size without losing their quality. They are also popular for creating interactive websites as they can be animated with HTML5 and JavaScript. By using SVG files, designers can create high-quality graphics with smaller file sizes than raster images like JPEGs or PNGs. This makes them ideal for web design projects where speed is essential.

Benefits of SVG files

SVG files have become increasingly popular in the current era and are used in various applications. From web design to printing, SVG files offer a range of benefits that make them the preferred choice for many businesses. They are lightweight, scalable, and can be easily edited and manipulated. This makes them ideal for creating logos, icons, illustrations, charts and graphs, and complex infographics.

SVG files are often the go-to choice when creating icons for websites and applications. However, when we need to change the color of an SVG icon, we often find ourselves in a tricky situation because creating different SVG files for each color variation increases the byte size. This can be a problem if we want to keep our website or application lightweight and fast loading. Fortunately, there is a way to avoid this.

Using SVG with React

There are quite a few techniques to choose from to incorporate SVG in React, like using an <img> tag or using an <svg> element. But there is one setback - complex images increase the SVG file size. Because SVG is stored in text, we have a bunch of text in our code.

One way to use SVG with React is to convert it into a React component. Create-react-app and Gatsby support this strategy by default, but if you're using webpack or Percel, you'll need to add some extra options to your webpack or Percel configuration.

SVG as a React component

We can use SVG as a component where SVG can be imported and used directly as React a Component. Here, the image is not loaded as a separate file; rather, it's rendered along with the HTML. Below is the sample code:

import React from 'react'; 
import {ReactComponent as SampleLogo} from './logo.svg';

const App = () => { 
  return ( 
    <div className="App"> 
      <SampleLogo /> 
    </div> 
  ); 
} 
export default App;

Here we can import the SVG as a React component and use it directly as a component where we can pass the css attributes of SVG as props, or add a css class to alter the properties of the SVG icon.

Following is the SVG file of the icon:

Text Box

<?xml version="1.0" encoding="UTF-8"?> 
<svg width="29" height="30" fill="none" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.21 77.95"> 
<defs> 
</defs> 
<path class="cls-1" d="m46.61,1.35L2.61,40.95h12v36h24v-24h16v24h24v-36h12L46.61,1.35Z"/> 
</svg>

Following is the snippet where the color of the icon is passed to fill the prop:

Text Box

import React from 'react'; 
import {ReactComponent as Home} from './home.svg';

const App = () => { 
  return ( 
    <div className="App"> 
      <Home fill=”red”/> 
      <Home fill=”green”/> 
      <Home fill=”orange”/> 
      <Home fill=”blue”/> 
    </div> 
  ); 
} 
export default App;

Desired Output: Same Icon with different color variants

Following is the icon SVG where the css properties can be altered using the path:

Text Box

<svg width="29" height="30" fill="none" id="eEDN04hPugp1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><path d="M12,2.099609L1,12h3v9h6v-6h4v6h6v-9h3L12,2.099609Z" transform="translate(0-.343348)" fill="#86bb4e"/></svg>

Following is the snippet where css attributes can be altered using css class:

Text Box

import React from 'react'; 
import {ReactComponent as Home} from './home.svg'; 

const App = () => { 
  return ( 
    <div className="App"> 
    <Home className="icon-grey"/> 
    <Home className="icon-red"/> 
    <Home className="icon-yellow"/> 
    <Home className="icon-green"/>  
    </div> 
  ); 
} 
export default App;

Text Box

.icon-grey { 
       path { 
         fill: rgb(43, 39, 39); 
            } 
           } 
 
.icon-red { 
      path { 
        fill: rgb(148, 53, 53); 
           } 
          } 
 
.icon-yellow { 
        path { 
          fill: rgb(218, 171, 84 ); 
             } 
           } 
 
.icon-green { 
         path { 
            fill: rgb(99, 145, 62); 
              } 
             }

Desired Output: Same Icon with different color variants

Using css to alter SVG properties

By employing this technique, SVG can serve as a React component, enabling the passing of css attributes as props to these components. Another option is to utilize a css class, simplifying the modification of SVG's css properties. This approach eliminates the need to generate multiple SVG variations for minor css adjustments, streamlining the overall process.