Как разместить текст внутри компонента реакции-иконки?

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