How to Use SVGs in Next.js

This post will teach you how to import SVG images in your Next.js project. You will learn 3 methods how to display SVGs:

• Using <img> element
• Pasting the content of .svg into JSX
• Using SVGR, which is the most versatile

The Easy Way

The easy answer is to rely on the good old HTML <img> element. You need to first place the SVG file inside the public folder located in your project’s root directory.

Then pass it to the <img> element via src attribute. The base URL to the public folder is /. This is how you would use public/logo.svg file.

<img src="/logo.svg" alt="Logo" />

If you decide to place your SVG in an assets folder inside public, then the src path changes to /assets/logo.svg.

Although this method is easy, it won’t work if you want to change the SVG with CSS, like setting its color.

A solution to that is to copy and paste the content of the .svg file right into your JSX.

import Logo from '../assets/logo.svg';

const Header = () => {
  return (
    <header>
      <svg width="1em" height="1em" viewBox="0 0 24 24"
        fill="none" stroke="currentColor"
        xmlns="http://www.w3.org/2000/svg"
        className="your-css-class"
      >
        <g>
          <line ... />
          <path ... />
        </g>
      </svg>
    </header>
  );
};

export default Header;

But, it can clutter the HTML fast and get out of hand when you need to import many SVGs all over your project.

A better solution is to use SVGR.

Using SVGR

SVGR turns SVGs into React components that you can embed into your HTML. This results in cleaner JSX and ability to apply your custom CSS.

You need to install SVGR webpack loader first.

npm install --save-dev @svgr/webpack

Afterwards, you need to change your next.config.js and add a new Webpack rule.

// next.config.js

const nextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

module.exports = nextConfig;

Now you can import and use SVGs like any other React component in your code.

import Logo from '../assets/logo.svg';

const Header = () => {
  return (
    <header>
      <Logo aria-label="Website logo" />
    </header>
  );
};

export default Header;

In this case, the path starts from the file importing the SVG, not the public folder.