javascript - React SVG disappearing when component rerenders - Stack Overflow

admin管理员组

文章数量:1327687

I am making a react application with some SVG icons within my ponents. For instance, I have a SearchBar ponent which includes the input element along with a button that has a Search Icon in it.

I am using inline SVG for all my SVG icons, by setting the xlinkHref attribute accordingly from a single sprite file.

Everything seems to work just fine, except that my SVG icons randomly disappear when I click on them. The button element that contains the icon does not disappear, just the SVG icon. I checked the DOM tree on the devtools, and it seems like that there is an issue with a node called "#shadow-root".

When my SVG icons are visible, they are placed as child nodes of the "#shadow-root". However, when they disappear, the DOM tree shows that "#shadow-root" node no longer has any child node, effectively making my SVG icons nowhere to be found.

Before disappearing:

After disappearing:

It is heart-breaking to see my lovely SVG icons suddenly disappear...

Please advise!

-----EDIT----- Here is the code for the ponent that I am using to insert SVG icons:

import React from "react";

const Icon = ({ name }) => (
  <svg>
    <use xlinkHref={`img/icons/sprite.svg#icon-${name}`} />
  </svg>
);
export default Icon;

I am making a react application with some SVG icons within my ponents. For instance, I have a SearchBar ponent which includes the input element along with a button that has a Search Icon in it.

I am using inline SVG for all my SVG icons, by setting the xlinkHref attribute accordingly from a single sprite file.

Everything seems to work just fine, except that my SVG icons randomly disappear when I click on them. The button element that contains the icon does not disappear, just the SVG icon. I checked the DOM tree on the devtools, and it seems like that there is an issue with a node called "#shadow-root".

When my SVG icons are visible, they are placed as child nodes of the "#shadow-root". However, when they disappear, the DOM tree shows that "#shadow-root" node no longer has any child node, effectively making my SVG icons nowhere to be found.

Before disappearing:

After disappearing:

It is heart-breaking to see my lovely SVG icons suddenly disappear...

Please advise!

-----EDIT----- Here is the code for the ponent that I am using to insert SVG icons:

import React from "react";

const Icon = ({ name }) => (
  <svg>
    <use xlinkHref={`img/icons/sprite.svg#icon-${name}`} />
  </svg>
);
export default Icon;

• javascript
• reactjs
• dom
• svg

Share Follow edited Jun 10, 2018 at 2:29 mikemklee asked Jun 9, 2018 at 5:42 mikemkleemikemklee 48311 gold badge88 silver badges1818 bronze badges 4

• Can you post some code ? – Ragul Parani Commented Jun 9, 2018 at 6:49
• @RagulParani just added the code for my Icon ponent! – mikemklee Commented Jun 10, 2018 at 2:30
• @xavascript did you ever figure this out? – Ben Racicot Commented Sep 10, 2018 at 13:47
• 1 I was facing the same issue in my project. You are using SVG sprite which gets the problem in react. Because sprite SVG handle by browser shadow dom and react has it own V-DOM. You should directly use SVG code or import it in img tag. SVG sprite also get problem in some browsers. – Shubham Laad Commented Mar 15, 2019 at 13:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

you can try another ways to include your SVG. I mentione three possibilities:

1. Use the .svg file as an img src, as we can see in create-react-app:

    import logo from './logo.svg';

    render() {...
          <img src={logo} className="App-logo" alt="logo" />
          ...}

2. Use svg-inline-react. For more info check here :

    import InlineSVG from 'svg-inline-react';

    const svgSource = `<svg xmlns="......</svg>`;
    <InlineSVG src={svgSource} />

3. Convert the SVG into base64 and set it in the background image of your button.

Good luck.

You can build the SVG element yourself. You can let React build the empty <svg> element, then manually insert a <use> element using a ref and an effect:

const Icon = React.memo(({ url }) => {
  const [svgNode, setSvgNode] = React.useState(null);

  React.useLayoutEffect(() => {
    if (svgNode === null) {
      return;
    }

    const useNode = document.createElementNS("http://www.w3/2000/svg", "use");
    useNode.setAttributeNS("http://www.w3/1999/xlink", "href", url);
    svgNode.appendChild(useNode);

    return () => {
      useNode.remove();
    };
  }, [type, svgNode]);

  return <svg ref={setSvgNode} />;
});

Based on this implementation.

本文标签： javascriptReact SVG disappearing when component rerendersStack Overflow