add MIT license
update README with credits and description
add --watch-preserve-output to node dev script
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!
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!
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.