在按钮内渲染 SVG 图标? [英] Render an SVG icon inside a button?

问题描述

我在文件夹 icon.svg 中有一个 SVG，我试图将它与文本一起呈现在按钮中.具体来说，它是 Google 图标，我试图将它呈现在一些显示使用 GOOGLE 登录"的文本旁边

我正在按原样导入 SVG 并尝试将其传递到按钮旁边，但是文件路径正在呈现:

function App() {返回 (<div className="应用程序"><button>{SVG}使用 GOOGLE 登录</button>

);}

这会呈现一个按钮，上面写着 /static/media/Icon.a1611096.svgSIGN IN WITH GOOGLE

应该如何正确渲染按钮内部的图标?

我一直在搞乱图标和按钮并接近了:

https://codesandbox.io/s/10k7rr3rp4

解决方案

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

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

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

<Logo className='logo'/>使用 Google 登录

I have an SVG in a folder icon.svg, I'm trying to render it in a button along with text. Specifically, it's the Google icon and i'm trying to render it next to some text that says "SIGN IN WITH GOOGLE"

I'm importing the SVG as is and trying to pass it next to the button but, the file path is rendering instead:

function App() {
  return (
    <div className="App">
            <button>{SVG}SIGN IN WITH GOOGLE</button>
    </div>
  );
}

That renders a button that says /static/media/Icon.a1611096.svgSIGN IN WITH GOOGLE

How is one supposed to render the icon inside the button properly?

EDIT: I've been messing with the icon and the button and got close:

https://codesandbox.io/s/10k7rr3rp4

解决方案

First you have to save the icon in assets folder.
Then import it into the component which you want to use in

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

Now you can use it like a component

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

这篇关于在按钮内渲染 SVG 图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！