简体   繁体   中英

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

您可以按如下方式使用 require 函数:

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

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>

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

live example

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM