Convert the React SVG component into a Base64 URL

import React from 'react';
import ReactDOMServer from 'react-dom/server';

// Convert an SVG string to a Base64 encoded URL
const svgToBase64 = (svgString) => {
  // Encode the SVG string as a UTF-8 byte array
  const utf8Bytes = new TextEncoder().encode(svgString);

  // Convert the byte array to a binary string
  const binaryString = Array.from(utf8Bytes)
    .map((byte) => String.fromCharCode(byte))
    .join(''); // Join the array into a single string

  // Encode the binary string to Base64
  return 'data:image/svg+xml;base64,' + btoa(binaryString);
};

// Convert a React SVG component to a Base64 URL
const convertReactDOMToBase64Url = (reactDOM) => {
  // Render the React component to a static HTML string
  const htmlString = ReactDOMServer.renderToStaticMarkup(reactDOM);

  // Parse the HTML string to a document object
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, 'text/html');

  // Get the outer HTML of the first child element
  const outerHTML = doc?.body?.firstChild?.outerHTML || ''; // Fallback to an empty string if not found

  // Convert the outer HTML to a Base64 URL
  return svgToBase64(outerHTML);
};

// Example: Create a simple React component
const testDOM = <div>testDOM</div>;

// Convert the React component to a Base64 encoded URL
convertReactDOMToBase64Url(testDOM);