Add Custom SVG Icons in NextJS - Tutorial

Adding custom SVG icons in NextJS is simple. We'll be using the npm package svgr/webpack, implementing it in our NextJS config, and then exporting the Icons from an index file.

The whole process just takes a couple of minutes :)

Hope you found this video helpful!

[riacharda]

Great tutorial! I'm working on a similar thing but more of an icon switcher.

The goal is to provide an icon name from the parent prop then dynamically import and render the SVG based on the name.

The icons are dynamically imported into an object. In principle, it should work but I get a load of TypeScript errors that I can't fix.

[kfjwmnr]

@1:53: Takes sip.
Great video, big help, thanks!

[vnicidigital]

Wow, thank you very much for this video, it helped me a lot now in NextJS 14. Very good.

[ertugrulsrt]

I wasnt able to use this package since it removes viewBox attribute from the svg automatically. I tried to fix it by trying about 5 different things from different github issues and stackoverflow answers but couldnt solve. Ended up wrapping the svg with a jsx component manually.

[Amitsarker]

Thank you Josh.
Can I use class inside SVG to use css?

[leoreys]

like and sign up for you as this worked perfectly for me, thanks for the help.

[SegevKlein]

This works Great Hoowever, if the svgs have stroke it doesnt work, how can this be overided?

[Samoniel]

dude thank you again so much, I did it in my old project and forgot what exactly I should gave copypasted

[lhlfcmx]

for me, only works on development..
when deploying to Vercel, every time I have a "could not resolve ./svg/google.svg" error..

[robinemelanson]

This does not work on the app server, just the page server. can you do an app server demo?

[nicko]

What about the license without pro version?

[sleekism]

Why don't you encapsulate the SVG into a component as a function/class and modify using props? Is there a disadvantage to that?

[SomeRandomDev-dxte]

Hey Josh,

I am still getting the error "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object." even though I have installed @svgr/webpack(^8.1.0) in my nextjs 14 1.3 app and updated the next.config.mjs:

webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
});

return config;
},
};

export default nextConfig;

[sashadev]

It would be great to learn how to work in Next.js with sprite.svg

[JoshuaHoward]

It's a complete shit show trying to implement this with NextJS 14

[zapfska]

This is dumb, why does it not work out of the box. SVGs are pretty popular

[OfficialLRY]

hab deinen channel gestern zufällig gefunden, als ich nach videos zum t3 stack gesucht habe. richtige starke videos, hat mir echt geholfen einen anfang mit t3 zu finden.
hast du discord oder so. Hätte ggf mal ein paar fragen :)