SVG sprite icons for React and Webpack

There are a lot of ways how you can use icons in your frontend, in this article I will explain everything you need to know about setting up a good SVG sprite icons solution in your React and Webpack app.

SVG Sprite Icons

The battle of icon solutions

Here is a quick list of different solutions for using icons in your app.

  • Sprite maps: you can use Gulp or Webpack to automatically generate a sprite map, this is a good solution but it is a lot of work, say for example you have a small icon in black, but you need to make it red? Lot’s of work… also keep in mind you need to keep multiple sprite maps for your shiny retina devices. More information about sprite maps.
  • Icon font: Icon fonts are awesome, but it can be a pain in the ass when a certain browser (ahumm… IE) renders the icon a few pixels to the top. More information about icon fonts and it’s pros and cons.
  • SVG sprite icons: This is the way to go, its verbose, easy, lightweight and very maintainable.

Read more…