can't get the SVG to my react component getting an error-CodePudding

I'm trying to add a SVG file but I'm getting an error tat says:

Compiled with problems:X

ERROR

[eslint] 
src/svg/banner.jsx
  Line 15:2:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (15:2)

this is the svg:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle
      cx="50"
      cy="50"
      r="40"
      stroke="blue"
      fill="lightblue"
    />
  </svg>
  
  
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="1921.641"
    height="170.5"
    viewBox="0 0 1921.641 170.5"
  >
    <defs>
      <linearGradient
        id="linear-gradient"
        x1="-0.038"
        y1="-1.902"
        x2="1.1"
        y2="2.41"
        gradientUnits="objectBoundingBox"
      >
        <stop offset="0" stop-color="#4040be" />
        <stop offset="0.36" stop-color="#4e67eb" />
        <stop offset="1" stop-color="#31c3ac" />
      </linearGradient>
    </defs>
    <path
      id="Path_30"
      data-name="Path 30"
      d="M0,0H1921.641V170.5H0Z"
      opacity="0.8"
      fill="url(#linear-gradient)"
    />
  </svg>

I'm trying to import it like this:

import { ReactComponent as Logo } from "../svg/banner.svg";

I've also tried to import it like this:

import banner from "../svg/banner.svg";

but it isn't working... any ideas?

using react and chakra UI

CodePudding user response：

If you want set the SVG as a react component, you should return one element. ( You can use react Fragment for that <> /* ...HTML code */ </>)

export default function Svg() {
   return (
     <>
       <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle
      cx="50"
      cy="50"
      r="40"
      stroke="blue"
      fill="lightblue"
    />
  </svg>
  
  
    <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="1921.641"
    height="170.5"
    viewBox="0 0 1921.641 170.5"
    >
    <defs>
      <linearGradient
        id="linear-gradient"
        x1="-0.038"
        y1="-1.902"
        x2="1.1"
        y2="2.41"
        gradientUnits="objectBoundingBox"
      >
        <stop offset="0" stop-color="#4040be" />
        <stop offset="0.36" stop-color="#4e67eb" />
        <stop offset="1" stop-color="#31c3ac" />
      </linearGradient>
    </defs>
    <path
      id="Path_30"
      data-name="Path 30"
      d="M0,0H1921.641V170.5H0Z"
      opacity="0.8"
      fill="url(#linear-gradient)"
    />
  </svg>
     </>
   
   )

}

CodePudding user response：

React expects svg element to also follow JSX syntax i.e. Camel-Casing of attributes and properties just like how CSS attributes are used in JSX with Camel-Casing.

Solution:
xmlns:xlink convert this to xmlnsXlink and please let me know does this solve your problem. And same camel-casing need to be applied for attribute that has dash -

If it gives error for exporting more than one component then wrap it with react fragment for one parent component
You need to export one element from the component here there are two parent element. You can wrap whole svg into react fragment as follows:

<> 
    <svg>
    <svg/> 

    <svg> 
    <svg/> 
</>

CodePudding user response：

JSX elements must be wrapped in an enclosing tag But Your component it's not wrapped . You can use Fragments to group all your svg tags without adding nodes to the DOM try it like this :

<>  // shorter syntax you can use for declaring fragments
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle
      cx="50"
      cy="50"
      r="40"
      stroke="blue"
      fill="lightblue"
    />
  </svg>
  
  
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="1921.641"
    height="170.5"
    viewBox="0 0 1921.641 170.5"
  >
    <defs>
      <linearGradient
        id="linear-gradient"
        x1="-0.038"
        y1="-1.902"
        x2="1.1"
        y2="2.41"
        gradientUnits="objectBoundingBox"
      >
        <stop offset="0" stop-color="#4040be" />
        <stop offset="0.36" stop-color="#4e67eb" />
        <stop offset="1" stop-color="#31c3ac" />
      </linearGradient>
    </defs>
    <path
      id="Path_30"
      data-name="Path 30"
      d="M0,0H1921.641V170.5H0Z"
      opacity="0.8"
      fill="url(#linear-gradient)"
    />
  </svg>
</>

CodePudding user response：

create js file export individual SVG data import file inside {} brace and inside importing an SVG file return SVG looks like

//This is my allsvg.js file
export const calender = <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  viewBox="0 0 16 16">
    <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
</svg>
//This is where i will import svg file
import { calender } = require("./Media/AllSvg");
return (<div>{calender}</div>)