在按钮内渲染 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

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

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

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

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