For a while I have been thinking about optimising icons that are selected by content-editors in a CMS in my Next projects.
Documentation on Dynamic imports or lazy loading imports state that imports must be defined and statically analysable, but some solutions to SO tickets state that work-arounds like concatenating the component/icon name to the path, does import dynamically on request, however, I can't seem to consistently get this to work.
Say I have a folder with icons icons/**.svg that are used sparingly, but semantically and content specific, what would be the most performant method of importing and rendering that component? An image request for an SVG is not a huge deal, but I would strongly prefer inlining my SVGs or even generating spritesheets for a page, since my routes are fairly static considering the long static lifetime of 9/10 pages that the client writes.
I have ran into this issue multiple times, and I have resorted to different solutions before, like huge icon fonts, serving the SVGs publicly and using them as images or simply predefining a limited icon set with their respective paths.
The one thing I think might solve this, is importing the context in a webpack loader so a reference to the large amount of icons is available at every render, however, my webpack skills leave something to be desired, especially in the context of the next.js environment. Therefore, I was looking to get a few opinions or experiences to see how others solve this seemingly trivial and common web problem in RSCs/Next.