Consider importing SVGs as React components

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.

[ericdfields]

This video convinced me that the way we should be using SVG is inline. This table, showing the features and benefits of implementing SVG using the three available techniques, cinched it for me:

An SVG is different from all other assets (image, sound, video, etc) in that isn’t a binary blob, and so can be more easily manipulated in our app. An SVG has more in common with a stateless react component than a JPEG.

You can still do this:

import Logo from './logo.svg';
...
<Logo className='App-logo' ariaLabel='logo' />
...

Then again, I suppose I haven’t thought through the scenario of using an SVG asset in CSS… 😬

[kauffecup]

as a workaround you can do something like:

import React from 'react';
export default () =>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M2.001 9.352c0 1.873.849 2.943 1.683 3.943.031"/>
  </svg>

then you can take in props and use those to adjust the fill