CODEWITHSUNDEEP
javascripthtmlcssreactjs
harshikerfuffle
harshikerfuffle

Reputation: 253

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

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: enter image description here

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

Upvotes: 5

Views: 36104

Answers (2)

Ahmedakhtar11
Ahmedakhtar11

Reputation: 1458

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

Upvotes: 1

Pavel Alekseev
Pavel Alekseev

Reputation: 1222

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>

Upvotes: 13

Related Questions