Javascript 如何在reactjs中向菜单添加本地图标？

目前，我们在我们的webapp中使用reactjs，我们使用ant design的默认图标，我们有一个新的图标设计，我已经在公共文件夹中添加了SVG图标。问题是我无法将我的本地图标从公用文件夹添加到导航菜单所在的routes.ts。我尝试添加图标值图标的文件路径：“../dashboard\u poker\u cards.svg”（请参阅附加的javascript对象菜单屏幕截图）。我尝试了另一种方法，在图标的值中添加文件路径，但仍然不会显示本地图标

我还尝试导入routes.ts顶部的文件路径，但收到警告“已声明，但其值从未读取”

---

---

我在routes.ts的顶部添加了const

const dashIcon = require('/dashboard_poker_cards.svg');

以及图标中的附加值：

图标：“dashIcon”

---

结果：声明了“dashIcon”，但从未读取其值。给出如下路径：

icon: “./public/icons/icon_name”


icon: “public/icons/icon_name”

import { YourSvg } from "src/components/path/to/your/svg/as/a/component/YourSvg.tsx";

我想这一切都可能奏效

Visual studio为.ts提供了一些扩展路径，因此安装它们后，您的操作将变得非常简单：）。

尝试以下操作：

import Icon from "filePath/svgName";

您可以在任何代码行中使用此图标。例如：

<img src={Icon}/>

---

首先要记住的是React中的所有文件路径都必须以“/”开头，正斜杠是对public文件夹的静态引用。无论与公用文件夹相比，您在代码中的哪个位置，所有图像路径都将直接以公用文件夹开始

因此，您应该做的是

/dashboard\u poker\u cards.svg

，而不是通过添加两个点来提升一个级别

使用SVG时，我更喜欢做的是创建它们的组件，而不是像导入任何其他组件一样导入它们

const YourSvg = ({ className, fill }: IProps) => (
    ... Paste your SVG code in here directly ...
);

export { YourSvg };

通过这种方式，您甚至可以为他们提供道具，为他们提供动态样式，或以任何方式更改行为，以及像这样导入他们：

icon: “./public/icons/icon_name”


icon: “public/icons/icon_name”

import { YourSvg } from "src/components/path/to/your/svg/as/a/component/YourSvg.tsx";

---

这回答了你的问题吗？你好，Mohamed，我尝试了在路由页面顶部添加导入，上面有文件路径，并在图标中添加了图标：“Icon”，但不起作用。我的问题是，我不知道如何将本地文件路径图标添加到route中图标的值中。Ts我认为您应该将svg移动到react组件的目录中，然后尝试一下Hello Niranjan我尝试过将文件路径添加为图标中的值，但不起作用（我在routes.ts的顶部添加了const，const dashIcon=require（“/dashboard\u poker\u cards.svg”）；和图标中的附加值：icon:'dashIcon'==Result:'dashIcon'已声明，但其值从未读取。您可以尝试创建它的实际组件，而不是常规Svg语法，以查看该帮助是否将该组件放置在route中的页面顶部。ts？是，然后在使用Svg路径的地方直接使用它相反，使用React语法，我是否仍然需要安装webpack来运行本地svg图标？