Summary

The article provides an overview of four methods to incorporate SVG icons into a Next.js project: using the Next.js Image component, SVGR, inlining SVG content into JSX, and defining SVG as JavaScript constants.

Abstract

The article "How to Use SVG Icons in a Next.js Project" by an undefined author discusses the advantages of SVG icons, such as scalability and manipulability through CSS and JavaScript, over traditional image formats like PNG or JPEG. The author outlines four distinct techniques for implementing SVG icons within a Next.js application. The first method involves using Next.js's built-in Image component, which optimizes image loading. The second method utilizes SVGR, a tool that transforms SVGs into React components, allowing for easy manipulation and integration into the component-based architecture of React. The third approach is to inline the SVG content directly within the JSX, which provides full control over the SVG but can lead to cluttered code. Lastly, the article suggests creating JavaScript constant variables to hold SVG strings, which can then be rendered using dangerouslySetInnerHTML or libraries like html-react-parser. The author concludes by recommending SVGR for its component-based approach, which aligns with React's philosophy.

Opinions

SVG icons are preferred for their size and programmability.
The Image component in Next.js is a performance-optimized way to render SVGs.
SVGR is highly recommended for Next.js projects due to its seamless integration with Webpack and React's component architecture.
Inlining SVG content into JSX, while offering full control, may not be scalable for projects with many icons.
Using dangerouslySetInnerHTML to render SVGs as strings is cautioned against due to potential security risks, with the recommendation to use safer alternatives like html-react-parser.
The author emphasizes the importance of choosing the right method based on the project's needs, such as the ability to change the icon's color on hover, which favors SVGR over the Image component.

How to Use SVG Icons in a Next.js Project

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:

Using the Image component of Next.js
Using the SVGR
Inline the SVG content into JSX
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:

👏 Clap for the story and follow the author 👉
📰 View more content in the Level Up Coding publication
🔔 Follow us: Twitter | LinkedIn | Newsletter

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