How to Use SVG Icons in a Next.js Project

Photo by Pankaj Patel on UnsplashPrefaceThe SVG icons have many advantages over png/jpeg for SVGS as they are smaller in size and can be programable like changing the CSS properties and animation.In this article, we will look at how to use SVG icons in…

Photo by Pankaj Patel on Unsplash

Preface

The SVG icons have many advantages over png/jpeg for SVGS as they are smaller in size and can be programable like changing the CSS properties and animation.

In this article, we will look at how to use SVG icons in a Next.js project. There are 4 ways that we can use to display SVG icons:

  1. Using the Image component of Next.js
  2. Using the SVGR
  3. Inline the SVG content into JSX
  4. Make the SVG as JavaScript const variable

Using the Image component of Next.js

Every time we use create-next-app to create a Next.js project, we can see public directory contains a vercel.svg which is referred in the page/index.tsx file. The SVG icon is rendered as an image:

The Image is a Next.js component that is an extension of the HTML <img> element with a variety of performance optimizations.

If you don’t want to use this component, you can use the <img> element directly.

<img src="/vercel.svg"" alt="Vercel Logo" />

Using the SVGR

SVGR is a tool to transform SVG into React component, which supports Webpack, Rollup.js, Next.js, and so on.

For a Next.js project, we need to install the @svgr/webpack loader firstly:

npm install --save-dev @svgr/webpack

Then modify the next.config.js in the root directory of Next.js project, and config @svgr/webpack :

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

Then in our code, we can import the SVG icon as a normal React component:

import VercelLogo from '../public/vercel.svg';
const Footer = () => {
return <footer> <VercelLogo /> </footer>
};

React will render the SVG icon as an html <svg> element, so we can change the color or other properties by CSS.

Inline the SVG content into JSX

The SVG icon is based html <svg> element, we also can inline the SVG content the JSX:

const Footer = () => {
return (
<footer>
<svg width="283" height="64" viewBox="0 0 283 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>
</footer>
);
}

But it can clutter the JSX and This will be a disaster when we need to replace or import more SVG icons.

Make the SVG as JavaScript const variable

As we know React support render string as html by using dangerouslySetInnerHTML property. So we can makte the svg as a const variable:

const logoString = '<svg width="283" height="64" viewBox="0 0 283 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/></svg>'
const Footer = () => {
return <footer dangerouslySetInnerHTML={{__html: logoString}} />;
};

By using dangerouslySetInnerHTML, entire html in the string is preserved which may expose your users into a XSS attack. The alternative would be to use a html-react-parser library, which converts the HTML string to React component.

Conclusion

In this article, we learn 4 ways to use SVG icons in a Next.js project. If you need to change the color of the SVG icon when hovered, the image way is not fitted.

In my projects, the most used way is SVGR for it makes the SVG icons as a React component, the most important feature of React is component-based.

Level Up Coding

Thanks for being a part of our community! Before you go:

🚀👉 Placing developers like you at top startups and tech companies


How to Use SVG Icons in a Next.js Project was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


Print Share Comment Cite Upload Translate
APA
bitbug | Sciencx (2024-03-29T13:01:20+00:00) » How to Use SVG Icons in a Next.js Project. Retrieved from https://www.scien.cx/2022/11/02/how-to-use-svg-icons-in-a-next-js-project/.
MLA
" » How to Use SVG Icons in a Next.js Project." bitbug | Sciencx - Wednesday November 2, 2022, https://www.scien.cx/2022/11/02/how-to-use-svg-icons-in-a-next-js-project/
HARVARD
bitbug | Sciencx Wednesday November 2, 2022 » How to Use SVG Icons in a Next.js Project., viewed 2024-03-29T13:01:20+00:00,<https://www.scien.cx/2022/11/02/how-to-use-svg-icons-in-a-next-js-project/>
VANCOUVER
bitbug | Sciencx - » How to Use SVG Icons in a Next.js Project. [Internet]. [Accessed 2024-03-29T13:01:20+00:00]. Available from: https://www.scien.cx/2022/11/02/how-to-use-svg-icons-in-a-next-js-project/
CHICAGO
" » How to Use SVG Icons in a Next.js Project." bitbug | Sciencx - Accessed 2024-03-29T13:01:20+00:00. https://www.scien.cx/2022/11/02/how-to-use-svg-icons-in-a-next-js-project/
IEEE
" » How to Use SVG Icons in a Next.js Project." bitbug | Sciencx [Online]. Available: https://www.scien.cx/2022/11/02/how-to-use-svg-icons-in-a-next-js-project/. [Accessed: 2024-03-29T13:01:20+00:00]
rf:citation
» How to Use SVG Icons in a Next.js Project | bitbug | Sciencx | https://www.scien.cx/2022/11/02/how-to-use-svg-icons-in-a-next-js-project/ | 2024-03-29T13:01:20+00:00
https://github.com/addpipe/simple-recorderjs-demo