Add Custom SVG Icons in NextJS - Tutorial

[@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.

[@Micurinrap]

Did you managed to make this work?

[@StefanM-y7s]

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

[@vnicidigital4030]

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

[@ertugrulsrt5761]

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.

[@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?

[@vanzed7539]

There is none. Because it's now in jsx, you can add ID, interpolate values, CSS module scope, ternary render paths, loop generate things like mazes. You can add classes to any path. If you know how to edit svg it's real powerful.

[@joshtriedcoding]

I find adding a className to the custom SVG easier for the standard use case. However, for more specific use cases, the previous comment makes good points

[@SegevKlein]

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

[@utkarshsharma1185]

Thanks for the kind help

[@santiagomanso-b5j]

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

[@felipetorres5136]

Really useful!! Thanks a lot, mate

[@Amitsarker]

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

[@seifnaguib1]

How would I do this in React JS?

[@nicko9958]

What about the license without pro version?

[@robinemelanson]

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

[@urakferraz9452]

how ca I use public folder?

[@Mvp_Monster28]

If I use this package means.. the next image not getting load.. I'm using NEXT JS 14.. anyone help me in that

[@БорисБаровский]

bro it is work in 14 version!
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
use: [{ loader: '@svgr/webpack', options: { icon: true } }],
});
return config;
},
};
export default nextConfig;

[@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 :)

[@leoreys3254]

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

[@OjitDebNath]

Thank you and great work.

[@HowardCodes]

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

[@hamzehmousavi1503]

دمت گرم.

[@joaco192]

thanks mate! really helpful and easy

[@sashadev86]

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

[@alejovilla2434]

great tutorial thanks so much!

[@koeigookinawa]

You are a life saver!

[@alejandror.2630]

thanks, it work for me, finally

[@mirfazilmirsharipov3473]

Thanks this video very useful

[@joshtriedcoding]

Happy to hear that

[@th0mas.p4ttz]

great stuff!

[@abdu1wahid105]

Good.

[@BuddhaNag-f9q]

useful video

[@zapfska7390]

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

[@RaZziaN1]

it works in react, but not in nextjs.. kind of dumb