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:
您可以按如下方式使用 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.
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.