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

Question

如何在图标周围添加圆形背景？ 我目前有一个来自 react-icons 的图标，想在它周围添加一个圆圈。 但到目前为止，我的一些方法还没有奏效。 任何输入都是有价值的。

以下是方法，谢谢。

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

Answer 1

你必须使用border-radius和border

我使用普通的 html，但反应的答案不会有所不同

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

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

Answer 2

建议：你可以把div border-radius改50%，调整图标的position，希望对你有用。

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

你可以查看这个StackOverflow 链接