Search code examples
reactjssvg

How to display svg icons(.svg files) in UI using React Component?

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.

Solution

  • 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.