With a little bit of webpack magic, you could embed the svg source of an img tag in the html document. From this point we could edit almost every property of the svg content, color, shapes, borders, you name it.

The problem with this method is the same as using images. The implementation of the icons relies on the icons asset, not on style.

It means that any other project that requires your styles, will have to import not only the css classes, but all those assets as well.

Font

Thanks to the webpack community, the painful process to generate the font files and css classes is mostly taken care of with a little extra build configuration.

There is more than one webpack loader that will help with the task, but the way they work are very similar.

The loader will read a folder with all your svg files and generate not only a font file, but the icons css classes as well.

Thanks to that, I can say the Font solution for icons is now maintainable and shareable between projects.