在按钮内渲染SVG图标？

Question

我在文件夹中有一个SVG icon.svg，我试图将其与文本一起呈现在按钮中。具体来说，它是Google图标，我正在尝试将其显示在显示“使用Google登录”旁边的文本旁边我正在按原样导入SVG，并尝试将其传递到按钮旁边，但是文件路径改为呈现：function App() {  return (    <div className="App">            <button>{SVG}SIGN IN WITH GOOGLE</button>    </div>  );}呈现一个按钮，上面写着 /static/media/Icon.a1611096.svgSIGN IN WITH GOOGLE应该如何正确呈现按钮内的图标？编辑：我一直在弄乱图标和按钮，然后关闭：https://codesandbox.io/s/10k7rr3rp4

Answer 1

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

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

Answer 2

首先，您必须将图标保存在assets文件夹中。
然后将其导入您要在其中使用的组件

import {ReactComponent as Logo} from '../../assets/google.svg';

现在您可以像使用组件一样使用它

<button>
   <Logo className='logo' /> Sign in with Google
   </button>