Loading Inline SVG into React

component.js

/*
Use CSS for styling via the awesome styled-components library
https://styled-components.com
*/


import styled from 'styled-components'
const LoadingImage = require('loading-svg/loading-spin.svg')

const LoadingComponent = styled(LoadingImage)`
  width: 40px;
  fill: #999;
`

export default LoadingComponent

svgicon.js

// nope

webpack.config.js

/*
The goal is still 100% inline <svg> tags, and I'm using React, so this is the best loader
https://github.com/jhamlet/svg-react-loader

Using the beta as of this writing, per the note at the beginning of the readme.
*/

{
  test: /\.svg/,
  loaders: [
    'svg-react'
  ]
}