Сделать иконку SVG внутри кнопки?

Question

У меня есть SVG в папке icon.svg, я пытаюсь отобразить его в кнопке вместе с текстом.В частности, это значок Google, и я пытаюсь отобразить его рядом с текстом «ВОЙТИ В GOOGLE»

Я импортирую SVG как есть и пытаюсь передать его рядом с кнопкой, новместо этого путь к файлу рендерится:

function App() {
  return (
    <div className="App">
            <button>{SVG}SIGN IN WITH GOOGLE</button>
    </div>
  );
}

, который отображает кнопку с надписью /static/media/Icon.a1611096.svgSIGN IN WITH GOOGLE

Как правильно отобразить значок внутри кнопки?

РЕДАКТИРОВАТЬ: Я возился с иконкой и кнопкой и приблизился:

https://codesandbox.io/s/10k7rr3rp4

Answer 1

Вы можете использовать функцию require следующим образом:

<button><img src={require(SVG)} alt="test" />SIGN IN WITH GOOGLE</button>

Answer 2

другое решение может заключаться в использовании styled-components с псевдоэлементом :: before. я просто переместил папку с изображениями в общую папку.

живой пример