Question 74230 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Can't write an svg inside button in react app – Reactjs

This is the code that I am getting the error on. I don’t think there is anything wrong with the code I wrote

import { ReactComponent as LogoutIconSvg } from "../../assets/svg/logout-user.svg";

<button type="button" className={styles.profilemenu__item} style={{ "--icon": "#F94687 " }} onClick={logout}>
    <LogoutIconSvg />
    Logout
  </button>

This is the error I am getting

validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
Tags:

2

Answers


  1. 0

    You can’t directly render svg as a component. You need to render it using img tag.

    And also you’re not importing your svg correctly because svg is a static file, not a component.

    Try importing it like below

    import LogoutIconSvg from "../../assets/svg/logout-user.svg";

<img src={LogoutIconSvg} />
    Login or Signup to reply.
  2. 0

    You cannot render an Svg as a component. To do that, you need to create a component that returns that svg, such as:

    //LogoutIconSvg.js 
const LogoutIconSvg =()=>
  {
      return (
       <svg>
       ...
       </svg>
       );
   }


 export default LogoutIconSvg

    Then, you can import and use as:

    import  LogoutIconSvg from "..path/LogoutIconSvg";

<button type="button" className={styles.profilemenu__item} style={{ "--icon": "#F94687 " }} onClick={logout}>
    <LogoutIconSvg />
    Logout
  </button>

    or,
    use the import svg as an image not as a component:

    <img src={LogoutIconSvg} />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search