如何使用样式组件为 React FontAwesome 图标设置样式？

Question

在我的 React 应用程序中，我需要一些彩色圆圈，即红色、绿色、蓝色等。我看到 Font Awesome 图标集有 official support for 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>));

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