How to use SVG in NextJS ?

Using svg as images in your NextJS app is pretty simple; just use Image with appropriate src property. But what if you want to change the size or color for the SVG?. it won’t be possible with that solution because it will be loaded as an Image and not as inline-svg. Fortunately there are multiple options to load SVG as an inline one. let’s explore most of the popular ones.

SVGR

This one is my favorite. SVGR is a Webpack plugin that converts all your SVGs into the React components. So after using it, you will simply import SVGs as any regular components.

Installation

install the package:

yarn add --dev @svgr/webpack

then go to the next.config.js and add config

and that’s it, you can use your SVG in components, for example