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

reactjs svg
Kamaraju picture Kamaraju · Feb 17, 2017 · Viewed 250.7k times · Source

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.

Answer

Tsuni picture Tsuni · Oct 2, 2018

If you use create-react-app 2.0 you can now do it like this:

import { ReactComponent as YourSvg } from './your-svg.svg';

And then use it just like you would normally use a component:

const App = () => (
 <div>
   <YourSvg />
 </div>
);

Related questions

Embedding SVG into ReactJS

Is is possible to embed SVG markup into a ReactJS component? render: function() { return ( <span> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ... </span> ); } Results in the error: Namespace attributes are not …

Read More
SVG use tag and ReactJS

So normally to include most of my SVG icons that require simple styling, I do: <svg> <use xlink:href="/svg/svg-sprite#my-icon" /> </svg> Now I have been playing with ReactJS as of late evaluating …

Read More
how to set up an inline svg with webpack

I am wondering how to set up an inline svg with webpack? I am following the react-webpack-cookbook. I have my webpack.config set up correctly with the file loader. However the example shows using a background image like this: .icon { …

Read More