How to Import SVGs into your Next.js Project?

Full-Stack Developer, Entrepreneur and Co-Founder of Coderplex.
Building https://coderplex.in
Checkout my portfolio at https://bhanuteja.dev
Search for a command to run...

Full-Stack Developer, Entrepreneur and Co-Founder of Coderplex.
Building https://coderplex.in
Checkout my portfolio at https://bhanuteja.dev
Very useful advice. Without this you will need to convert SVGs into React components and import them, which is tedious. I am sure many will find this useful.
Thank you 😀
Authored in connection with the Write With Fauna program. Table of Contents Authentication Setting up Fauna in Next.js Installing Fauna Setting up Migrations Tool Authentication and Authorization in Fauna Next.js Serverless Function Setup for Fa...

I wanted to start blogging in Aug of 2020. I decided to use @hashnode for my blog. It was the best decision that I made. I wrote 27 technical articles so far. Most of them are about frontend web development. A thread 🧵 about each of these articles i...

Next.js has become my go-to framework for almost every project that I make. So, I made a starter template that I can just use and get started easily. In this article, I will show you how to use the starter template that I made and deploy it with Verc...

In this article, I will list out all the git commands that I use very frequently. This is not in any way a complete list, just the commands that I use very often. This is intended to be used as a quick reference to perform an action that you want. ...

In this article, we will see the order in which different useEffect callbacks and cleanups happen. We will also see how it differs when the app mounts, unmounts, updates. This image is taken from https://github.com/donavon/hook-flow. I took the ex...

Bhanu Teja Pachipulusu's blog
29 posts
Developer, Indie Maker and Blogger. Currently building MDX.one
Checkout my portfolio
Next.js is my go-to framework for building any type of frontend applications. It has many things pre-configured right out of the box. For example, you have built-in support for css, css modules, sass etc. It also comes with built-in support for environment variables and many other things. But one thing you cannot do directly in Next.js is to import SVG files in your components. In this article, I will explain the steps with which you can setup your nextjs project so that it can support importing svg files into your components.
I have created a basic Hello World NextJs app. See the file structure below.

We are going to use a babel plugin called babel-plugin-inline-react-svg.
npm install --save-dev babel-plugin-inline-react-svg
Now, lets add that plugin to our .babelrc file.
Create a file named .babelrc at the root of your project if it is not already present and add the following contents to it.
{
"presets": ["next/babel"],
"plugins": ["inline-react-svg"]
}
That is all we need to enable svgs in out Next.js project.
Let's test and see if it works. Let's import Next.js logo into our index page
// src/pages/index.js
import NextLogo from '../assets/nextjs.svg'
export default function Home() {
return (
<div>
<NextLogo width={100} height={100} fill={'red'} />
<h1>Hello Next.js</h1>
</div>
)
}
Now, run the development server with next dev.

You can see here that NextJs logo is imported and rendered successfully.
There are many other ways to import svgs into your Next.js project. But I feel like this is the easiest way to do so.
If all you want is to import svg files in to your component as an image, and you don't want to add any svg specific properties like
fillto it, then you can simply move the file to/publicfolder of your Next.Js project and then use animgtag to render svg.<!-- nextjs.svg image is at public/nextjs.svg --> <!-- NextJs automatically serves files like images that are under 'public' folder --> <img src='/nextjs.svg' />
All the code that is written in this article is available on my github at pbteja1998/nextjs-with-svg
If you have any feedback or suggestions to improve the blog post, please leave them in the comments. I will try to improve the post accordingly.
If this blog post was helpful to you, please consider liking it and sharing it so that it reaches more people.
If you want to get notified as soon as I write a new blog post, you can click on Subscribe button at the top of this page. You can also follow me here at Bhanu Teja P or on twitter at @pbteja1998 to get updated.
Links and References