有没有办法在react中动态构建svg？

import React from 'react';

function MySvgComponent() {
  return (
    <svg width="200" height="200">
      <circle cx="100" cy="100" r="50" fill="red" />
    </svg>
  );
}

npm install react-svg

import React from 'react';
import { ReactSVG } from 'react-svg';

function MySvgComponent() {
  const svgContent = `
    <svg width="200" height="200">
      <circle cx="100" cy="100" r="50" fill="red" />
    </svg>
  `;

  return (
    <ReactSVG src={svgContent} />
  );
}