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

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

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

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

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