在按钮内渲染 SVG 图标？

IT技术 javascript html reactjs button icons
2021-05-03 16:41:21

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

3个回答

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

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

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

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

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

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

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

活生生的例子

其它你可能感兴趣的问题
上一篇组件本地状态不使用react自定义钩子更新 下一篇如何防止用户在react中多次单击登录表单的提交按钮错误？