search

LetsMesh / Site

Repository for the Website named Let's Mesh
https://letsmesh.vercel.app
6 stars 2 forks source link

Use SVGR for svg components #355

Closed blu3eee closed 3 months ago

blu3eee commented 3 months ago

Adopt svgr to allow svgs to be loaded as React components for faster loading

**I also renamed some files that I missed from my last two PRs (just my own nitpicks in files naming).

blu3eee commented 3 months ago

atm, I have a workaround by optimizing the svg files with the command using svgo. tdlr, svgr is also using svgo to optimize the svg files before "making" them React components.

The problem with the config is that the svgr will allow us to import svg files to react components but not optimized (it is expected to optimized with svgo plugin by default). I'm blocked at this point with trying to make svgr to optimize the svg files on components importing instead of optimizing svg files by running the svgo cmd line ourselves. This workaround still works in terms of svg optimization but not the best way to do it. I tried to look around the open and closed issues in svgr but none of the solution works. I'm not too familiar with webpack configuration myself so I might have missed something.

blu3eee commented 3 months ago

** This PR is ready to be merged to use optimized SVG instead. Further research is needed to make svgr optimize svgs automatically with svgo but that is another problem in the future.

SVGs like MeshPfp.svg and MeshLogo.svg when optimizing with svgo is not working as expected so I excluded those from the optimizing command.