如何使用React Component在UI中显示svg图标(.svg文件)? [英] How to display svg icons(.svg files) in UI using React Component?

问题描述

我已经看到很多用于svg的svg库，但是没有一个给我如何在react组件中导入.svg的代码，我已经看到了谈论将svg代码引入反应而不是使用.svg图标作为图像的代码并显示在用户界面中.

I have seen lot libraries for svg on react but none gave me how to import a .svg in the react component , I have seen code which talk about bring the svg code in to react rather than using the .svg icon as image and show it in the UI .

请告诉我是否有嵌入图标的方法.

Please let me know if there are ways to embed the icon .

推荐答案

如果图像是远程托管的，则可以直接将.svg扩展名与img标记一起使用.

You can directly use .svg extension with img tag if the image is remotely hosted.

ReactDOM.render(
  <img src={"http://s.cdpn.io/3/kiwi.svg"}/>,
  document.getElementById('root')
);

这是小提琴: http://codepen.io/srinivasdamam- 1471688843/pen/ZLNYdy?editors = 0110

注意:如果您正在使用任何Web应用程序捆绑程序(例如Webpack)，则需要具有相关的文件加载器.

Note: If you are using any web app bundlers (like Webpack) you need to have related file loader.

这篇关于如何使用React Component在UI中显示svg图标(.svg文件)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！