在按鈕內渲染 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 偽元素的樣式組件。 我只是將圖像文件夾移動到公共文件夾。

活生生的例子