如何使用SVG作为data.js文件中的道具？

Question

我将我的网站内容存储在data.js文件中，并使用道具将这些内容传递给我的组件。一切都很好。但是我的.svg文件不会显示。但是，当我将图像的扩展更改为.jpg或.png时，它就能工作了。我关心的是.svg。

这是我的data.js文件

  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",
    },
  ],
};

在ServiceTile组件中，我使用道具传递数据：

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

最后，在我的App.js中，我使用map函数来呈现组件：

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

有什么问题吗？还有别的办法吗？我也在用造型的部件。

Answer 1

以下是我会使用的另一种方法。

制作一个svg组件，将路径作为道具

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

export default SvgIcon;

并使用svg路径更改data.js中的数据(称为d)

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

然后，您可以使用路径调用这个SvgIcon组件。希望它能帮上忙

Answer 2

请将SVG文件移动到公用文件夹中，路径: Project => public \Static123.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'
    },

Answer 3

谢谢你的回答。我偶然地解决了这个问题，代码几乎没有改变。在我传递道具的地方，我添加了.default

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