tl;dr: You need to import the responsive svg as a ReactComponent
Firstly, you need a responsive SVG. And then you need to inport it as a ReactComponent
in React
1import React from 'react'
2
3
4import logo from '../assets/img/logo-responsive.svg'
5import { ReactComponent as Logo } from '../assets/img/logo-responsive.svg'
6
7function Demo() {
8 return (
9 <div className="App-body">
10 <main>
11 <h1>Responsive SVG Demo</h1>
12
13 {/* the img will show but will not be responsive */}
14 <img src={logo} alt="logo" />
15
16 {/* the ReactComponent will be a respnsive SVG, but it'll add the entire SVG,
17 i.e. ALL the <symbol>s you defined will be in the code */}
18 <Logo />
19 </main>
20 </div>
21 )
22}
23
24export default Demo