background image svg react code example

Example: svg css background react

import React from "react";
import "./styles.css";
import BackgroundSVG from "./backgroundSVG";
// import this to render static markup
import { renderToStaticMarkup } from 'react-dom/server';

export default function App() {
  // convert component to string useable in data-uri
  const svgString = encodeURIComponent(renderToStaticMarkup(<BackgroundSVG />));

  return (
    <div className="App">
      <h2
        style={{
          backgroundImage: `url("data:image/svg+xml,${svgString}")`
        }}
      >
        Svg background
      </h2>
    </div>
  );
}