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?

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?

• javascript
• reactjs
• svg

• Convert your svg code here(svg2jsx.com) may be it will work – Sherothkar Commented Dec 5, 2022 at 7:37

4 Answers 4

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.

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

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.

Here what I did,

import React from 'react'
import svg from "../assets/img/sprite.svg";

const Header = () => {
  return (
    <div>
      <button class='search__button'>
       <svg class='search__icon'>
         <use xlinkHref={`${svg}#icon-magnifying-glass`} />
       </svg>
      </button>
    </div>
  )
}

export default Header

How this done in plain HTML

<svg class="search__icon">
    <use xlink:href="img/sprite.svg#icon-magnifying-glass" />
</svg>