2 methods to import a svg in React

Let's assume that we want to import a vectorial.svg using React. There are 2 options:

1. Import as a component
2. Import as an image

Import as a component

Import the .svg as a React component:

jsx
import React                           from 'react';
import { ReactComponent as Vectorial } from '../Assets/vectorial.svg';

const App = () => {
    
    return(
        <Vectorial/>
    );
    
}

export default App;

Import as an image

Import the .svg as an image:

jsx
import React     from 'react';
import Vectorial from '../Assets/vectorial.svg';

const App = () => {
    
    return(
        <img src = {Vectorial}/>
    );
    
}

export default App;