I'm working on an index-like application with a giant lazy-loaded table (on the order of 30,000 rows) and a variety of sorting and filtering features. The application uses around sixty custom SVG icons. Many of these icons use several colors, so an icon font is not a good fit. It is likely that a typical user will see a large fraction of these icons in a single session. A typical icon will show up hundreds of times in the data.
This seems like too many icons to load them in separate requests. However, data URIs seem to perform poorly when duplicated many times.
One option I haven't explored is rendering the icons as CSS background images with data URIs. This might avoid some of the performance issues with data URIs.
What's the best way to do this?