Solid basics of an SVG icon system in this guide from Florens Verschelde, mixed with some good tricks: the two-color trick, pre-loading the sprite, and using custom properties for unlimited color variations. Also an interesting bit about using multiple methods for sprite insertion:
I like mixing both methods, building two sprites:
- A small one with essential icons (e.g. main icons used in the page header), to be inlined on each page. Target size: 5KB or less.
- A bigger one with all the project’s icons, kept as an external file. Target size: 50KB or less.
“Critical Icons”, as it were.