时间戳

首页 > 解决方案 > 在按钮内渲染 SVG 图标？

javascript - 在按钮内渲染 SVG 图标？

问题描述

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

标签： javascripthtmlreactjsbuttonicons

解决方案

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

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

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

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

推荐阅读