在按钮内渲染 SVG 图标？答案

【问题标题】：Render an SVG icon inside a button?在按钮内渲染 SVG 图标？
【发布时间】：2019-09-21 12:19:39
【问题描述】：

我在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的按钮

应该如何正确呈现按钮内部的图标？

编辑：我一直在搞乱图标和按钮并接近了：

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

你可以按如下方式使用require函数：

<button><img src={require(SVG)} alt="test" />SIGN IN WITH GOOGLE</button>

【讨论】：

试过了，它显示的是路径而不是实际的svg 元素：Error: Cannot find module '/static/media/Icon.a1611096.svg' 这一定是我导入它的方式？将其导入为：import SVG from './images/Icon.svg'; 我也尝试将其作为组件导入：import { ReactComponent as SVGIcon } from './images/Icon.svg';，但这似乎不起作用。
您是否使用 create-react-app 创建了项目？如果是的话，像这样导入它 import SVG from './images/Icon.svg';然后把它放在图像的 src 中应该可以正常工作。但是，如果您正在编写自己的 webpack 配置，则需要确保您已经讨论了相关配置，请查看以下链接：itnext.io/…

【解决方案3】：

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

【讨论】：