#svgs-to-spritesheet

Generate a SVG spritesheet from a folder of .svg icon files that you can import and consume in a JSX Icon component, improving performance over just copy-pasting raw SVG icons directly into client-side JSX. The spritesheet can be cached on a CDN or by the browser and your Icon component can still provide a great developer experience, best of both worlds!

#Why

When shipping JSX bundles to the client (with React or other JSX-based libraries), many people resort to copy-pasting raw SVG icons directly into their JSX which gets bundled to the client. This ultimately will hurt both rendering performance and memory usage, when the SVGs could be put into one spritesheet file that can be linked to with the <use> element. Jason Miller of the Preact team adds more details in this tweet. A better alternative is to use a technique like the one in this repository to automatically generate a SVG spritesheet that can be cached on a CDN and by the browser, which then can be linked to in a JSX Icon component that links to the appropriately selected icon in the spritesheet by name with the <use> element. This repository also demonstrates how to generate a Typescript definition file that allows you to use a string union of all of the icon filenames (with .svg filetype stripped) so that you still get autocompletion in the Icon component consumption of the available icons to you. Give it a try in your project today!

#Credits

Thanks to Heroicons for providing a great set of MIT licensed icons to use in any project! The icons in this repository are all taken from the library of Heroicons icons.