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

Question

I have an icon as a component, I need to put the text inside of it. Here is what I have:

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

The styles

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

The result It is not about the styling, I can apply it on my own. I'm asking is there a way to make this values as children or smth like this.

Answer 1

Create a new component:

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

Style the divs according to your needs.

Then pass value as a prop: <customIcon value=0/>