在 React.js 代码中使用 .svg 文件时出现问题

Posted 2023-03-06

【中文标题】在 React.js 代码中使用 .svg 文件时出现问题

【英文标题】：Trouble while using .svg file in React.js code

【发布时间】：2022-01-13 17:46:33

【问题描述】：

我正在尝试在我的 react 项目中使用插图 (https://storyset.com/illustration/market-launch/pana/animate) [我试图在我的代码中使用的插图图像https://i.stack.imgur.com/AQr8P.png

我选择 SVG 和 CSS 我得到了长编码的 .svg 文件，谁能帮助我，我如何在我的反应代码中使用 SVG 文件

.svg file which I trying to access

【参考方案1】：

将该文件导入您要使用的位置：

从“./yoursvg.svg”导入 ReactComponent as NameOfYourSvg

将 NameOfYourSvg 替换为您要使用的名称，它必须以大写字母开头。

之后，只需在您的代码中使用 svg 即可：

<div>
<NameOfYourSvg />
<div>