如何在react中引入外部svg文件，并使用js操作svg中的数据？

Question

react项目中有a.jsx文件，期望在该文件中引入a.svg文件，并且可以在a.jsx文件中使用js来修改svg代码中的数据。
比如：有a.svg文件如下：

<svg id="mySvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60"
    height="60" viewBox="0 0 60 60" fill="none">
    <rect x="0" y="0" width="0" height="0" fill="rgba(249, 249, 249, 1)" />
    <defs>
        <rect id="path_0" x="0" y="0" width="60" height="60" />
    </defs>
    <g opacity="1" transform="translate(0 0)  rotate(0 30 30)">
        <rect fill="#FFFFFF" opacity="1" transform="translate(0 0)  rotate(0 30 30)" x="0" y="0"
            width="60" height="60" />
        <mask id="bg-mask-0" fill="white">
            <use xlink:href="#path_0"></use>
        </mask>
        <g mask="url(#bg-mask-0)">
            <path id="矩形 1" fill-rule="evenodd" style="fill:#FAD2D2"
                transform="translate(16 19)  rotate(0 12 12)" opacity="1"
                d="M0,24L24,24L24,0L0,0L0,24Z " />
            <g opacity="1" transform="translate(25 22)  rotate(0 3.5 9)">
                <text>
                    <tspan x="0" y="13.92" font-size="12" line-height="0" fill="#000000" opacity="1"
                        font-family="SourceHanSansCN-Regular" letter-spacing="0">1</tspan>
                </text>
            </g>
        </g>
    </g>
</svg>

期望通过js将 图中的数据 “1” 修改为接口获取的数据（比如修改为 “2”）。

真实的需求是比较复杂的页面，开发时间较短，无法实现完全用svg来画页面，所以选用的方案是 ui出设计图，然后转为svg文件，期望能引入svg文件并修改其中的数据等内容。

Answer 1

放在外面不行，这样svg就是一张图片了，无法修改
可以直接把svg内联在html页面中，像操作 dom 一样操作svg就行了

<div>
    <svg>
        <rect  />
      </svg>
    ...
</div>

Answer 2

可以把 a.svg 写成一个组件，按普通组件一样使用就可以了。

export const Badge = (props: {num: number}) => (
    <svg>
        {/** ignore.... */}
        <text>{props.num}</text>
    </svg>

)