I've had trouble getting the SVGs working and so I asked AI for help, prompting for a report comparing several approaches on using SVGs with react and tailwind. It resulted in the following table, recommending the use of SVGR. The thing is, the last time I tried to set up SVGR with my project I ran into some trouble. Something about next.js no longer using webpack... I'll give it another go though because I understand that setting up tools and configuration is an important part of developing.
Method|Type Safety|Perf (JS Size)|Styling Depth|Learning Curve |---|---|---|---|---| Registry|High|Low|High|Easy SVGR|High|Medium|High|Medium Sprites|Low|High|Low|Medium Framer|High|Low|Highest|Hard
Update: Yea it doesn't work because my version of next Next.js version: 16.1.6 (Turbopack) uses turbopack (as shown) instead of webpack. When I prompted for fixes it suggested I:
- probably have to use a less 'cutting edge' version of Next,
- or use a svg library like
lucide-react(Which contain the icons that ted uses for his website), - or just manually convert it (or use the SVGR CLI tool),
- or use
@svgr/corepackage which is apparently compatible with turbo pack.
And so I was looking at the documentation for setting up with npm i @svgr/core but I can't find anything of use for starting from scratch. What the literal helly. WHY AM I GETTING STUCK ON IMPORTING ICONS ARRGHH.