Can't import SVG into Next.js

Question

When I try to import SVG Image then the following error shows. Which loader I have to use for importing SVG images?

./static/Rolling-1s-200px.svg 1:0
Module          


        

Answer 1

You can use babel-plugin-inline-react-svg

import React from 'react';
import CloseSVG from './close.svg';

const MyComponent = () => ;

npm install --save-dev babel-plugin-inline-react-svg

// .babelrc
{
  "plugins": [
    "inline-react-svg"
  ]
}

Or see the link for more instructions.