如何在不使用 SVG 图像的情况下使用带有文本的 React 创建圆形/方形形状？

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>