Using SVG Sprites with React and Nextjs
How to use React SVG Sprites in NextJS 13 using the App Router. Most of the popular icon libraries for React load the icons in an inefficient way, directly to JSX.
Blog Post with Code Snippets:
https://www.jamesshopland.com/blog/ne...
Github Repo:
https://github.com/jolbol1/nextjs-svg...
Tweet (Context):
/ 1382838799420514317
Blog Post (In-depth)
https://benadam.me/thoughts/react-svg...
Epic Stack (Code modified from Remix.js implementation):
https://www.epicweb.dev/epic-stack
Sly CLI
https://sly-cli.fly.dev/
-----
Twitter: / jollyshopland
Personal Site: https://jamesshopland.com
GitHub: https://github.com/jolbol1
JollyUI: https://jollycod.ing/ui
Where I Work: https://jollycod.ing/work
----
0:00 Intro & Why sprite sheets
0:55 Template project - Create next app
1:45 Adding icons easily
4:00 Automate SVG Sprite Sheets
6:00 Using icons in a Component
9:20 Preload the image
9:50 Outro
