如何在反应图标周围添加圆形背景？

Question

How can I add circular backgrounds around icons? I currently have an icon from react-icons and would like to add a circle around it. But so far some of my methods have not worked. Any input is valued.

below is the approach and thank you.

import { RiRocketLine } from 'react-icons/ri'
....
<div id='icons' className='icon'>
   <RiRocketLine style={{ color: 'red' }} size="30px" />
</div>

Answer 1

You have to use border-radius and border

I used plain html, but the answer will not differ for react

 .icon { border-radius: 50%; border: 2px solid red; padding: 5px; font-size: 30px; }

 <span class="icon"></span>

Answer 2

Suggestion: You can change the div border-radius by 50% and adjust the position of your icon, I hope it will work for you.

#icons{
    background: transparent;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

import { RiRocketLine } from 'react-icons/ri'
....
<div id='icons' className='icon'>
   <RiRocketLine style={{ color: 'red' }} size="30px" />
</div>

you can check this StackOverflow link