Notes

Responsive SVGs in React

Edit on GitHub

ReactJS

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