React SVG not showing

Question

I have a problem showing an SVG in my react app.

Here is the code:

<svg className="svg-arrow">
    <use xlinkHref="#svg-arrow" />
</svg>

 //styling
.user-quickview .svg-arrow {
    fill: #fff;
    position: absolute;
    top: 12px;
    right: 10px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.svg-arrow {
    width: 4px;
    height: 8px;
    cursor: pointer;
}

In another project, without react, the SVG (xlink:href) works perfectly.

Does anyone have a solution for this?

Answer 1

SVG images display in React without a special link or plug-in. There is another reason an SVG may not display. If the canvas you drew the SVG on is very large and the image you created is very small and sits in the middle of the canvas, the image may not show because there is so much white space around the image. You need to crop the canvas (the Viewport) so that the image sits close to canvas (the viewport) edge. In other words, get rid of the white space. Check the SVG/XML with a text editor to see what the viewport rectangle is set to. You can use Illustrator or online SVG editor tools to crop your SVG image visually.

Answer 2

without seeing your components and code it's hard to answer your specific needs. but have you tried react-svg?
you can also read this

Answer 3

You can use npm "install @svgr/cli --save-dev".

This helps you to generate react components based on an SVG icon, then you can pass fill, height, width as props. Very simple to use.

Check out this link for a more detailed explanation.