This content originally appeared on Level Up Coding - Medium and was authored by bitbug
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
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.
This content originally appeared on Level Up Coding - Medium and was authored by bitbug
bitbug | Sciencx (2022-11-02T12:10:12+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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.