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

问题描述

我在 react 上看到了很多 svg 库，但没有一个告诉我如何在 react 组件中导入 svg 文件.我看过一些代码，这些代码谈论将 svg 代码带入反应中，而不是使用 .svg 图标作为图像并将其显示在 UI 中.

如果有嵌入图标的方法，请告诉我.

解决方案

如果图片是远程托管的，您可以直接使用带有 img 标签的 .svg 扩展名.

>

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)，您需要有相关的文件加载器.

I have seen a lot of libraries for svg on react but none gave me how to import an svg file in the react component. I have seen code which talk about bring the svg code into 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.

解决方案

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')
);

Here is the fiddle: http://codepen.io/srinivasdamam-1471688843/pen/ZLNYdy?editors=0110

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

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