目前，我们在 webapp 中使用 reactjs，我们使用 ant design 的默认图标，我们有一个新的图标设计，我已经在 Public 文件夹中添加了 SVG 图标。问题是我无法将公用文件夹中的本地图标添加到导航菜单所在的 routes.ts 中。我尝试添加图标值 icon: “../dashboard_poker_cards.svg” 的文件路径（请参阅附加的 javascript 对象菜单截图）。我尝试了另一种在图标值中添加文件路径的方法，但仍然不会显示本地图标
我还尝试在 routes.ts 顶部导入文件路径，但我收到警告“已声明但其值从未读取”。
我在 routes.ts 的顶部添加了 const
const dashIcon = require('/dashboard_poker_cards.svg');
图标中的附加值：icon: 'dashIcon'
结果：“dashIcon”已声明，但其值从未被读取。
【问题讨论】：
标签： javascript reactjs image
给出这样的路径：
icon: “./public/icons/icon_name”
icon: “public/icons/icon_name”
我认为这一切都可能奏效。
Visual Studio 有一些 .ts 的扩展路径，所以安装它们然后你的做法会变得非常简单:)。
【讨论】：
试试这个：
import Icon from "filePath/svgName";
您可以在任何代码行中使用此图标。例如：
<img src={Icon}/>
【讨论】：
首先要记住的是，React 中的所有文件路径都必须以“/”开头，并且正斜杠是对 public 文件夹的静态引用。与 public 文件夹相比，无论您在代码中的哪个位置，所有图像路径都将直接以 public 开头。
所以你应该做的是/dashboard_poker_cards.svg，而不是通过添加两个点来提升一级。
在使用 SVG 时，我更喜欢创建它们的组件，而不是像任何其他组件一样导入它们。
const YourSvg = ({ className, fill }: IProps) => (
... Paste your SVG code in here directly ...
);
export { YourSvg };
这样你甚至可以给他们道具，给他们动态样式，或者以任何你想要的方式改变行为，以及像这样导入它们：
import { YourSvg } from "src/components/path/to/your/svg/as/a/component/YourSvg.tsx";
【讨论】：