Consider importing SVGs as React components

Created by: ericdfields

My own path of using SVGs with webpack has settled me comfortably with loading .svg files as react components via https://github.com/jhamlet/svg-react-loader (svg-react-loader@next as of time of writing). This allows you to treat an SVG just like any other React component, and renders out inline SVGs. For example:

const MySvg = require('./mySvg.svg')

const MyApp = () =>
  <div>
      // some components!
     <MySvg /> // could also pass fill='#ccc' or style={styleObj}
  </div>

// renders
/*
<div>
  <svg ...> ...etc </svg>
</div>
*/

Inline SVGs offer the most amount of flexibility in terms of styling, animation, and manipulating props. SVGs in the browser are now more supported than ever. They are quickly replacing icon fonts as the preferred way to do icons in your app.

I'd enjoy hearing the community's thoughts on this.