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 />

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.

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.