javascript - 如何将文本放入 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;
    }
}

结果 这与样式无关，我可以自己应用它。我在问有没有办法让这个价值观像孩子一样或像这样。

标签： javascriptcssreactjs

Answer 1

创建一个新组件：

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

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

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