CODEWITHSUNDEEP
react-nativesvg
EvaHHHH
EvaHHHH

Reputation: 353

How to place icon into svg circle?

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>

Upvotes: 0

Views: 645

Answers (1)

EvaHHHH
EvaHHHH

Reputation: 353

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>

Upvotes: 0

Related Questions