CODEWITHSUNDEEP
javascripthtmlreactjsbuttonicons
user7496931
user7496931

Reputation: 1519

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

Upvotes: 2

Views: 20260

Answers (3)

Oussama Bouchikhi
Oussama Bouchikhi

Reputation: 615

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>

Upvotes: 6

lanlau
lanlau

Reputation: 116

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

live example

Upvotes: 0

Zolfekar Askarieh
Zolfekar Askarieh

Reputation: 201

You can use the require function as follows:

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

Upvotes: 2

Related Questions