如何将SVG样式转换为JSX

<!-- example.svg -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
</svg>

import React from 'react';

const SvgComponent = () => (
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
  </svg>
);

export default SvgComponent;

import React from 'react';
import ExampleSvg from './example.svg';

const SvgComponent = () => (
  <div>
    <ExampleSvg />
  </div>
);

export default SvgComponent;

import React from 'react';
import './styles.css'; // 确保样式文件已导入

const SvgComponent = () => (
  <svg className="svg-style" width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
  </svg>
);

export default SvgComponent;

import React, { useState } from 'react';

const SvgComponent = ({ size }) => {
  const [color, setColor] = useState('yellow');

  return (
    <svg width={size} height={size}>
      <circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill={color} onClick={() => setColor('red')} />
    </svg>
  );
};

export default SvgComponent;