SVG as SVG

import React from 'react'
import logo from './logo.svg' // Tell Webpack this JS file uses this svg

console.log(logo) // /logo.84287d09.svg

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />
}

export default Header

SVG as a React component

You can import an SVG as a React Component. This has been supported since Create React App 2.0 (react-scripts@2.0.0 and react@16.3.0)

import { ReactComponent as MyIcon } from './icon.svg'
export { MyIcon }
import { ReactComponent as Logo } from './logo.svg'
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo className="App-logo" alt="logo" />
  </div>
)

Don’t forget the curly braces in the import! The ReactComponent import name is special and tells Create React App that you want a React component that renders an SVG, rather than its filename.

A ReactComponent SVG will show as inline <svg> when rendered. You can now use all the CSS magic.

.App-logo g {
  fill: red;
}

.App-logo path {
  stroke: palegoldenrod;
  stroke-width: 10px;
  fill: none;
  stroke-dasharray: 35px 15px;
  animation: orbit 1s infinite linear;
}

@keyframes orbit {
  to {
    sroke-dashoffset: 50px;
  }
}

SVG with Props

To be continued.. Will probably have to leave the .svg files and add the paths in a .jsx file so we could use props