How to place icon into svg circle?

Question

For some reason, I need create a button with svg.

Here are my code for now, I found that the icon will be at the different position instead of inside the circle.

How to place the icon into the circle?

<Svg height="100%" width="100%">
  <TouchableOpacity>
    <Icon type="ionicon" name="camera" size={40} />
    <Circle r="6%" cx="50%" cy="90%" fill="white" />
  </TouchableOpacity>
</Svg>

Does this answer your question? [Icon into SVG Circle](https://stackoverflow.com/questions/31677269/icon-into-svg-circle) — Abanoub Asaad, May 12 '21 at 13:49

score 0 · Answer 1 · answered May 12 '21 at 14:51

I worked with the code below.

<Svg height="100%" width="100%">
  <TouchableOpacity>
    <Circle r="6%" cx="50%" cy="90%" fill="white" />
    <Text
      dx="50%"
      dy="91%"
      textAnchor="middle"
      fontSize="36"
    >
      &#x1f4f7;
    </Text>
  </TouchableOpacity>
</Svg>

How to place icon into svg circle?

1 Answers1