如何将 SVG 文件添加到 Visual Studio Code 中的 React 项目？答案

【问题标题】：How do I add an SVG file to a React project in Visual Studio Code?如何将 SVG 文件添加到 Visual Studio Code 中的 React 项目？
【发布时间】：2023-01-30 03:20:01
【问题描述】：

我正在尝试将一些 SVG 图像添加到我的项目中。我有下载的图像，并尝试将它们以 MP3 格式和 SVG 格式放入我的文件系统，但这不起作用。我想知道如何将这些下载的文件添加到我的项目中。

我已经尝试了在 Google 上找到的所有内容，但它似乎没有用。

【问题讨论】：

请概述您尝试过的内容。这只是一个 importing 它们并使用 <img> 标签的 src 属性上的 URL 的例子。您还可以使用 react-svgr.com 将 SVG 转换为 React 组件。
回覆“这是行不通的”：你可以说得更详细点吗？发生了什么？症状是什么？

标签： javascript reactjs svg

【解决方案1】：

import { ReactComponent as MySvgFile } from './mySvgFile.svg';

然后像这样渲染它：

<div>
  <MySvgFile />
</div>

【讨论】：

这假设您的 SVG 文件与您的 React 组件位于同一文件夹中
您好，感谢您的回复，是的，这就是我想要做的。唯一的问题是我不知道如何将 svg 文件放入我要渲染它的同一文件夹中。我的电脑上有一个下载，但我不确定从那里将它移到哪里