React- How to use SVG as props from data.js file?-CodePudding

I store my website content in data.js file and I'm passing this content using props to my component. Everything works fine. But my .svg file won't display. But when I change an extension of my image to .jpg or .png it works. What I care about is .svg.

This is my data.js file

  tails: [
    {
      header: "Brand Recognition",
      description:
        "Boost your brand recognition with each click. Generic links don't mean a thing. Branded links help instil confidence in your content.",
      image: require("../assets/img/icon-brand-recognition.svg"),
    },
    {
      header: "Detailed Records",
      description:
        "Gain insights into who is clicking your links.Knowing when and where people engage with your content helps inform better decisions.",
      image: require("../assets/img/icon-detailed-records.svg"),
    },
    {
      header: "Fully Customizable",
      description:
        "Improve brand awareness and content discoverability through customizable links,supercharging audience engagement.",
      image: "../assets/img/icon-fully-customizable.svg",
    },
  ],
};

In ServiceTile component I'm using a props to pass the data:

  return (
    <Wrapper>
      <CardBody>
        <Circle>
          <img src={image} alt="Icon" />
        </Circle>
        <div id="content">
          <h3>{header}</h3>
          <p>{description}</p>
        </div>
      </CardBody>
    </Wrapper>
  );
}

And at the end in my App.js I'm using map funtion to render the components:

          <ServiceTile
            header={item.header}
            description={item.description}
            image={item.image}
          />
        ))}

What is the problem? Is there any other way to do that? I'm using styled-components aswell.

CodePudding user response：

here is a different approach I would use.

Make a svg component that take path as a props

const SvgIcon = ({ path }) => {
  return (
    <svg viewBox="0 0 24 24">
      <path d={path} />
    </svg>
  );
};

export default SvgIcon;

and change your data in your data.js with your svg path (called d)

  tails: [
    {
      header: "Fully Customizable",
      description: "Improve brand.....",
      image: "m5.214 14.522s4.505 4.502 6.259 6.255c.146.147.338......",
    },
  ],
};

then you can call this SvgIcon component with the path. Hope it helps

CodePudding user response：

Please move the SVG files in public folder, Path: Project => public\static\123.svg

{
      header: 'Brand Recognition',
      description:
        "Boost your brand recognition with each click. Generic links don't mean a thing. Branded links help instil confidence in your content.",
      image: '/static/123.svg'
    },