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 {ReactComponentasLogo} from'../../assets/google.svg';

Now you can use it like a component

<button><LogoclassName='logo' /> Sign in with Google
</button>

Solution 2:

You can use the require function as follows:

<button><imgsrc={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