How to create circle/square shapes using React with text inside them without using SVG images?

Question

What is the way to create circle and square shapes using React which can contain custom text inside them without using SVG images? An example:

I have tried the following code but it doesn't render any shapes:

import React from 'react';

export default function Circle(){
  return(
    <div height="110" width="500">
      <circle
        cx="50"
        cy="55"
        r="45"
        fill="none"
        stroke="#F0CE01"
        strokeWidth="4"
      />
    </div>
  );
 }

Answer 1

You can use even a div tag to do that. Just add border-radius to create a circle.

React example: https://codesandbox.io/s/shapes-qbf1f

Here is a snippet for a quick overview:

 .square { display: flex; width: 100px; height: 100px; background-color: red; } .circle { display: flex; width: 100px; height: 100px; background-color: green; border-radius: 50%; } .text { margin: auto; }

 <div class="square"> <p class="text">Square text</p> </div> <div class="circle"> <p class="text">Circle text</p> </div>