Styling SVG in React Project

Scalable Vector Graphics (SVG) are widely used in modern web development, especially in React applications. In React, styling SVG can be achieved using CSS styles. In this blog post, we will discuss this in detail.

Also, this post will be a continuation of my previous post-

https://medium.com/@rajendransoundar3/play-with-svgs-in-react-project-61c7bc8fe411

Read the above content for using SVG as a component in react

The below code shows the style of the SVG in a particular div element.

.share-card>a>svg, .social-share-icons>a>svg{
    fill: #939393;
    width: 40px;
    height: 40px;
}

We can also apply the effect while hovering menu icons as below.

.share-card:hover>a>svg{
    transform: scale(1.3);
}

With this technique, we can customize any properties of SVG. Even we can change the fill colour of SVG elements like path, rect etc

.share-card:hover>a>figure>svg path{
    fill: 939393;
}

Thanks for reading!