javascript-使用对象对SVG组件进行反应

我试图在一个对象文件中获取SVG。然后像这样使用SVG。

import {CustomIcons} from "./Icons"

<CustomIcons name="FrameIcon" />
<CustomIcons name="VectorIcon" />

我只想导入一个文件并根据名称获取一个自定义图标。我已经试了几个小时了，我迷路了

CustomIcon.tsx

export const CustomIcons = {
  FrameIcon: (
    <svg
      width="632"
      height="330"
      viewBox="0 0 632 330"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C695.409 238.987 667.885 262.248 636.416 276.436C612.104 287.397 589.793 302.386 564.742 311.911C523.785 327.491"
        fill="#232323"
      />
    </svg>
  ),

  VectorIcon: (
    <svg
      width="632"
      height="330"
      viewBox="0 0 632 330"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C69"
        fill="#232323"
      />
    </svg>
  ),
};