Render an SVG icon inside a button?

Question

I have an SVG in a folder icon.svg, I'm trying to render it in a button along with text. Specifically, it's the Google icon and i'm trying to render it next to some text that says "SIGN IN WITH GOOGLE"

I'm importing the SVG as is and trying to pass it next to the button but, the file path is rendering instead:

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

That renders a button that says /static/media/Icon.a1611096.svgSIGN IN WITH GOOGLE

How is one supposed to render the icon inside the button properly?

EDIT: I've been messing with the icon and the button and got close:

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

Answer 1

First you have to save the icon in assets folder.
Then import it into the component which you want to use in

import {ReactComponent as Logo} from '../../assets/google.svg';

Now you can use it like a component

<button>
   <Logo className='logo' /> Sign in with Google
</button>