3 ms·
I have tried this, but adding symbols to the file becomes a giant PITA. Then, you also have to ensure that symbols are loaded on every page. I had some SVGs tha
by shubhamjain 6y ago
I have tried this, but adding symbols to the file becomes a giant PITA. Then, you also have to ensure that symbols are loaded on every page. I had some SVGs that were multiple kilobytes (logos and stuff), and this just increased the page weight.
You can give my library, svg-loader, [1] a try. It's a single line of javascript that makes it really easy to load external SVGs as inline elements. The syntax is even shorter and you avoid all the problems of external SVGs.
[1]: https://github.com/shubhamjain/svg-loader https://github.com/shubhamjain/svg-loader
- bhl 6y agoI'm not sure if this library is better. If you're making an XHR for each inline svg, then that's a lot of unnecessary network requests compared to a dynamically generated svg sprite-sheet at build time. The latter is definitely possible with a pre-defined sprite UI library like Material Design or Font Awesome mentioned in the blog post.
- shubhamjain 6y agoWith HTTP2, the cost of making a request is incredibly low and almost.not worth optimizing for non blocking resources. Unless, you're loading hundreds of icons, you shouldn't notice that much of a difference.
- zamalek 6y ago> I have tried this, but adding symbols to the file becomes a giant PITA. I use Affinity Designer for this. It exports artboards using a trivially detectable pattern, which can be easily turned into symbol elements in a compilation step. I made a feature request for an option to do this natively, but it never got any traction.