1import React from "react";
2import "./styles.css";
3import BackgroundSVG from "./backgroundSVG";
4// import this to render static markup
5import { renderToStaticMarkup } from 'react-dom/server';
6
7export default function App() {
8  // convert component to string useable in data-uri
9  const svgString = encodeURIComponent(renderToStaticMarkup(<BackgroundSVG />));
10
11  return (
12    <div className="App">
13      <h2
14        style={{
15          backgroundImage: `url("data:image/svg+xml,${svgString}")`
16        }}
17      >
18        Svg background
19      </h2>
20    </div>
21  );
22}