Использование компонента в качестве кнопки React

Question

У меня есть кнопки в моем приложении React, и я хотел добавить к ним изображение, используя SVG, и, как я выяснил, мне нужен был отдельный компонент для моих файлов SVG, поэтому я пошел по этой ссылке исделал себя компонентом <SVGIcon />.

Я пытался добавить его к button, но, похоже, он не работает.Я попытался использовать его как кнопку, добавив onClick к <SVGIcon />, но затем кнопка исчезла.

Как я могу использовать свой SVG-компонент, но сохранить свойства кнопки?

<SVGIcon  name="list " width={100}/>
<Button onClick={() => this.playPreviousVideo()} disabled={this.state.activeKey === 1} className="mr-3">
    previous()
</Button>

Answer 1

Самое простое решение, с которым вы можете избежать неприятностей, это просто преобразовать компонент SVGIcon как дочерний элемент в Button.

<Button
  onClick={() => this.playPreviousVideo()}
  disabled={this.state.activeKey === 1}
  className="mr-3"
>
  previous() <SVGIcon name="list" width={100} />
</Button>