Как поместить SVG внутрь SVG ? (используя React.js)

При использовании какой-либо библиотеки, такой как диаграмма или что-то еще, в которой есть почти все, что нам нужно, но вы просто хотите немного больше настроить.
Я столкнулся с необычным требованием: мне нужно поместить SVG внутрь SVG.

Вначале я думал, что могу просто импортировать как изображение, например:

import YourSVG from "../utils/icons/yoursvgpath.svg";

const customizeSVG = (
  <svg>
     <g>
       <YourSVG /> // it doesn't work.
     </g>
  </svg>
) 

и не появилось.

После еще нескольких попыток я, наконец, понял это.
Его необходимо импортировать как компонент React.

Есть окончательный результат.

import { ReactComponent as YourSVG } from "../utils/icons/yoursvgpath.svg";

const customizeSVG = (
  <svg>
     <g>
       <YourSVG />
     </g>
  </svg>
)

Наслаждайся этим! :)