React component providing a replacement img tag which makes fetchSvgInline work with server-side rendering (tested on Gatsby). "fetchSvgInline" (by @stowball) fetches a remote SVG as an <img> and converts it to an inline SVG.

SvgImg.js

import React, {Component, createRef } from 'react'
// Include Matt Stow's fetchSvgInline from https://gist.github.com/stowball/e51dde035346eba783f3d8b54dbbf2a4
import { fetchSvgInline } from '../utilities/helpers'

export default class extends Component {

  constructor(props) {
    super(props)
    this.imgRef = createRef()
  }

  componentDidMount() {
    const img = this.imgRef.current
    if (img && img.complete) {
      this.svgLoaded({currentTarget: img})
    }
  }

  svgLoaded(e) {
    return (window !== 'undefined' && 'fetch' in window)
      ? fetchSvgInline(e.currentTarget)
      : true
  }

  render() {
    return (
      <img
        alt={this.props.alt}
        lazyload="lazy"
        onLoad={this.svgLoaded}
        ref={this.imgRef}
        {...this.props}
      />
    )
  }
}

Usage:

import SvgImg from './SvgImg'

// Later in your page…

<SvgImg
  alt=""
  className="some classes here"
  src="/images/logo.svg"
/>