如何将文本放入react-icons组件中？

Question

我有一个图标作为一个组件，我需要把文本放在里面。这就是我所拥有的：

<span className={s['manaBtn']}>
    <FiHexagon /><span className={s['manaBtn__text']}>{props.value}</span>
</span>

风格

.manaBtn {
        position: relative;
    &__text {
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(50%, -50%);
        z-index: 2;
    }
}

结果

这不是关于样式，我可以自己应用它。我想问的是，有没有一种方法可以让这些值像孩子或孩子一样。

Answer 1

创建一个新组件：

const customIcon = props => {
  return (
    <div>
      <FiHexagon/>
      <div>props.value</div>
    </div>
  )
}

根据您的需要设置div的样式。

然后将value作为道具传递：<customIcon value=0/>