Using SVG in Next.js & React

Photo by UX Store on Unsplash

How can we use SVG as ReactComponent inside Nextjs & React?

When you create new web applications probably you would use SVG’s in your project. SVG’s are really important in web development.

You can have a look to my another post to see the importance of SVG usage and some useful SVG sources i use on my daily life.

Importance of SVGs in Web Development

How to use SVG’s in Next.js?

There are few options to use svg’s in your nextjs application you can choose which one suits best for you and start using that technique!

1 - SVG components

Using SVG components is one of the simplest and affective one for me, because it works with React, Nextjs and Preact so basically you can use it on every react environment without any issue and without any extra package.

Also creating a component means you can pass any props you would like to and instead of creating single component for each usage you can use that as many places as you want with different stylings, class names, width, height and fill colour!

const Icon = ({fill, width, height}) => {
  return (
    <svg height={height} width={width} fill={fill} viewBox="0 0 24     24"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
  </svg>
 );
}
 
const ConcreteIcon = (
  <div style={{width:'100%',textAlign:'center'}}>
    <Icon fill="#9a9a9a" width={100} height={100} />
   </div>
);

Here is the live result of that component, as you can see when we render that component we added fill colour width and height props and use it like that.