title: How to create circle/square shapes using React with text inside them without using SVG images?
body: <p>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: <a href="https://i.stack.imgur.com/iHZgy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iHZgy.png" alt="enter image description here" /></a></p>
  <p>I have tried the following code but it doesn't render any shapes:</p>
  <pre><code>import React from 'react';
  
  export default function Circle(){
    return(
      &lt;div height=&quot;110&quot; width=&quot;500&quot;&gt;
        &lt;circle
          cx=&quot;50&quot;
          cy=&quot;55&quot;
          r=&quot;45&quot;
          fill=&quot;none&quot;
          stroke=&quot;#F0CE01&quot;
          strokeWidth=&quot;4&quot;
        /&gt;
      &lt;/div&gt;
    );
   }
  </code></pre>