Render An SVG Icon Inside A Button?

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

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

Solution 2:

You can use the require function as follows:

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

Solution 3:

another solution could be to use styled-components with ::before pseudo element. i just moved the images folder to the public folder.

live example