How to Use SVG as Component With create-react-app?

When you're using create-react-app, you can directly import and use SVGs as a React component in your code. To do this, first you will have to import your SVG like so:

import { ReactComponent as MyLogo } from './logo.svg';

Then you may use your imported SVG as a component. For example:

import { ReactComponent as MyLogo } from './logo.svg';

const App = () => (
  <div id="App">
    <MyLogo />
  </div>
);

export default App;

This works because create-react-app uses SVGR under the hood to make it possible to transform and import SVG as a React component.