Как добавить собственное изображение или значок внутри круга SVG

Question

Я использую реагирующее дерево-график для отображения данных в древовидной структуре, в которой узлы представлены в виде кругов.Я хотел бы добавить значки внутри круга. Но он не отображает значки.

Я пытался использовать приведенные ниже коды, но не смог получить результат. Я хотел бы знать, возможно лидобавьте значок внутри круга.Я не хочу добавлять текст под кружком и отображать значок

<Tree
  data={data}
  height={400}
  width={400}
  svgProps={{
    className: 'custom'
  }}
  nodeRadius={10}
  circleProps={{fill: 'url(#image)'}}
  animated>
  <defs>
    <pattern id="image" x="0" patternUnits="userSpaceOnUse" y="0" height="100%" width="100%">
      <image x="0" y="0" height="100%" width="100%" href="http://www.viralnovelty.net/wp-content/uploads/2014/07/121.jpg"></image>
    </pattern>
  </defs>
</Tree>