Portfolio-website / Blog Post

Understanding SVGR and trying not to 'black box'

March 18, 2026

Figuring out the ins and outs of using SVGs for icons, and understanding the 'magic' of SVGR.

portfolio-websitewebdev

I admit it... the way I stubbornly try to always understand the process of things really is an inconvenience. It's the reason why-- even though I was immensely excited to learn webdev at uni-- I never got into it. There was too much 'magic' going on. We would learn about html, css, js, and http, then we'd skip a few steps and end up using some magical 'framework' shenanigans to make a website in 'react' because it was the modern standard. I understood none of it, and thats why I was stagnant in learning it, and i'm thats also the case with why some people would not get to learning about it too. Maybe I was subconsciously icked by what I didn't understand... wow philosophical... I guess I could work on that...

Anywhooo, as soon as I had identified that as a mental road block, I leveraged AI to help explain how the technology got to this point. I kinda get the gist of the historical progression towards why I am using next js for my project but I still am blackboxing a LOT of the processes that happen under the hood (and I suppose thats fine because I likely never will fully understand the whole process). This came about because I started questioning why I had to install certain plugins to use @svgr/core (namely: @svgr/plugin-jsx and @svgr/plugin-svgo),

I noticed I've kinda been just copy pasting code without really giving it a go myself for this part and so I'll tell the AI with future prompts to not give the code out-right (unless prompted to), but instead to give the pseudo-code (explaining each step along the way) as well as information about any changes (or additions) that need to be made to the file structure of the project. (oh yeah a lil prompt engineering geared towards learning)

Onto what I'm actually going to do about it... I was taught (by AI ofc), about how using a 'CLI-driven generation pattern'. It takes place at the 'build-time' of the application (or something) through the use of a script we make that uses the @svgr/core package to generate tsx components from our corresponding SVGs. I just imported the code provided, tried to understand it, and so now it prob doesn't work (i haven't tested). I'll work more on this next time.