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>
  );
 }

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>
  );
 }

• javascript
• html
• css
• reactjs

• 1 Rectangles/squares and circles/ovals can be created with just css if you want to put text in them. For rect, just change width and height properties, for ellipse, just change width, height, and border-radius properties. – Samathingamajig Commented Nov 17, 2020 at 22:40

2 Answers 2

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>

Here's how I did it with simple React

let initials = ("AA");
let color = ("#606060");
const customStyle =
{
 display: "flex",
 height: "30px",
 width: "30px",
 borderRadius: "100px",
 color: "white",
 background: color,
 margin: "auto",
 marginRight: 5,
 marginTop: -4
}

return(
    <div style={{display: "flex"}}>
     <div style={customStyle}>
     <span style={{margin: 'auto'}}>{initials}</span>
    </div>
        Profile
    </div>
)