React Component for Icons using Inline SVG

React supports
several SVG elements which means you can embed your icon code directly into a component. Inline SVG has
good browser support and by using it you can save HTTP
requests, icons are still cachable and you can control them using CSS.

Here's a very simple implementation of an Icon component with 2 icons:

JSX supports multiline strings, so you can add line breaks to the d attribute safely. For an IconButton
component check out the source.

I found this useful in several situations, but it is not the right solution for every project. For example, if you have an isomorphic app
with a list of 100 items, each one with the same icon, you probably don't want the same SVG code repeated 100 times in the HTML served.
Another thing to take in mind is that React adds a data-reactid attribute, which are standard in regular HTML5 markup but not
for SVG elements (however, as far as I know, this has no practical consequences).

Icon Set from the Polymer Project

Browse a collection of optimized SVG icons created by the
Polymer Team.
Here we included the 796 icons, but you should pick only the ones you need.
The icons are licensed under CC-BY.