Reactjs 如何在这个组件中居中放置svg？

以下是我的示例代码：

import React from "react";
import ReactDOM from "react-dom";

type AssetProps = {
  className?: string,
  style?: any
};

const SVG_CIRCLE =
  '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><path d="M 5 7 C 6.105 7 7 6.105 7 5 C 7 3.895 6.105 3 5 3 C 3.895 3 3 3.895 3 5 C 3 6.105 3.895 7 5 7 Z"></path></svg>';

const createAsset = (gylph: string) => (props: AssetProps) => (
  <div {...props} dangerouslySetInnerHTML={{ __html: gylph }} />
);

const Circle = createAsset(SVG_CIRCLE);

function App() {
  return (
    <div className="App">
      <h1>Here are some circles</h1>
      <h2>
        <Circle />
      </h2>
      <h2>
        <Circle
          style={{
            fill: "blue",
            width: "50px",
            height: "50px",
            border: "1px solid blue"
          }}
        />
      </h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
类型AssetProps={
类名？：字符串，
风格？：有吗
};
常数圆=
'';
const createAsset=（gylph:string）=>（props:assetrops）=>(
);
const Circle=createAsset（SVG_Circle）；
函数App（）{
返回(
这里有一些圆圈
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(

SVG图形不会展开，即使大小设置为每侧50像素

即使我从
SVG\u CIRCLE
中删除了
width=“10”height=“10”
，它也没有任何效果。如何在该组件中缩放SVG

编辑：

我已将
SVG
行更改为
const SVG\u循环=
'';

下面是指向codesandbox上的代码示例的链接：
添加一个viewBox属性，该属性设置为某个合适的值。我添加了
viewPort=“0 100 100”width=“100”height=“100”
但它没有效果我说的是viewBox，您编写了viewBox。很抱歉输入错误。但是如果您选中了codesandbox，更正后的代码仍然不起作用。您希望SVG位于div的中心，还是只希望点位于div的中心？添加一个viewBox属性集到某个合适的值。我添加了
viewPort=“0 100”width=“100”height=“100”
但它没有效果我说的是viewBox，你写的是viewBox。很抱歉输入错误。但是如果你选中了codesandbox，更正后的代码仍然不起作用。你想让SVG位于div的中心，还是让圆点位于div的中心？