reactjs - 如何使用样式组件设置 React FontAwesome 图标的样式？

Question

在我的 React 应用程序中，我需要一些彩色圆圈，即红色、绿色、蓝色等。我看到 Font Awesome 图标集对 React 有官方支持，所以我安装了相关包。我复制了这些示例，它们开箱即用。

由于我需要的图标非常简单，因此我想要一个<RedCircle />可以在页面中使用的简单组件（即 ），但我无法理解如何正确创建该组件并为其设置样式。

这是我最后整理的：

const RedStyle = styled.span` color: red; `;
const RedCircle = React.memo( () =>  (<RedStyle> <FontAwesomeIcon icon={faCircle} /> </RedStyle>));

const GreenStyle = styled.span` color: green; `;
const GreenCircle = React.memo( () =>  (<GreenStyle> <FontAwesomeIcon icon={faCircle} /> </GreenStyle>));

它有效，但感觉有点麻烦/过度。有没有更清洁或更正确的方法？