在按钮内渲染SVG图标？

Question

我在文件夹icon.svg中有一个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>

Answer 3

另一种解决方案是将带样式的组件与:: before伪元素一起使用。 我只是将图像文件夹移到了公共文件夹。

live example