Importing SVG in NextJS

Question

I am trying to import an svg within a NextJS project, everytime I get this error

./assets/aboutimg.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="578" height="1028" viewBox="0 0 578 1028">
|   <image id="_64538565_2370063099695596_8091233071539421184_n" data-name="64538565_2370063099695596_8091233071539421184_n" width="578" height="1028" xlink:href="

I have tried using next-images and also svgr. I will paste my About.js code below, it would be excellent if someone could let me know what I have been doing wrong.

import LayoutNoLogo from '../comps/LayoutNoLogo'
import AboutImg from '../assets/aboutimg.svg'

const About = () => {
    return (
        <LayoutNoLogo>
            <div className="row">
                <div className="column-1">
                    <img src={AboutImg} />
                </div>
                <div className="column-2">
                    <h1>About</h1>
                </div>
            </div>
            <style jsx>{`

        `}</style>

        </LayoutNoLogo>
    )
}

export default About;

https://stackoverflow.com/questions/55175445/cant-import-svg-into-next-js — joy08, Mar 30 '20 at 11:33
@sv12 I followed this and it still comes up with the same error — Mac Dev, Mar 30 '20 at 11:43

score 3 · Answer 1 · answered Jan 23 '21 at 09:40

I've finally used file-loader for using SVG images in my project.

install webpack and file loader : yarn add webpack, yarn add file-loader -D
in next.config.js:

module.exports = {
    //...other configs
    webpack: (config, {}) => {
        config.module.rules.push({
                test: [/\.svg$/, /\.woff$/],
                loader: 'file-loader',
                options: {
                    name: '[name].[hash:8].[ext]',
                    publicPath: `/_next/static/images/`, //specify the base path
                    outputPath: 'static/images', //and output path
                }
        })
    }
}

Now I can use import img from '../assets/image.svg'

score 1 · Accepted Answer · answered Apr 06 '20 at 13:10

1

Using next-images and adding the correct module exports allowed me to use images of all file types.

https://www.npmjs.com/package/next-images

answered Apr 06 '20 at 13:10

Mac Dev

83
1
3
11

This shouldn’t be necessary in later versions of next next 9^ – Mac Dev Jan 23 '21 at 14:46

Importing SVG in NextJS

2 Answers2