在按钮内渲染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&nbsp;src={require(SVG)}&nbsp;alt="test"&nbsp;/>SIGN&nbsp;IN&nbsp;WITH&nbsp;GOOGLE</button>

Answer 2

首先，您必须将图标保存在assets文件夹中。然后将其导入您要在其中使用的组件import&nbsp;{ReactComponent&nbsp;as&nbsp;Logo}&nbsp;from&nbsp;'../../assets/google.svg';现在您可以像使用组件一样使用它<button> &nbsp;&nbsp;&nbsp;<Logo&nbsp;className='logo'&nbsp;/>&nbsp;Sign&nbsp;in&nbsp;with&nbsp;Google &nbsp;&nbsp;&nbsp;</button>