Как добавить локальные иконки в меню в reactjs?

Question

В настоящее время мы используем reactjs в нашем веб-приложении и используем иконки по умолчанию от ant design, у нас есть новый дизайн иконок, и я уже добавил иконки SVG в папку Publi c. Проблема в том, что я не могу добавить свои локальные значки из папки publi c в route.ts, где расположены навигационные меню. Я попытался добавить путь к файлу со значком icon: «../dashboard_poker_cards.svgabilities (см. Прикрепленный снимок экрана с javascript меню объекта). Я попробовал другой способ добавления пути к файлу в значке значка, но все равно не будет отображаться локальный значок

Я попытался также импортировать путь к файлу в верхней части route.ts, но я получаю предупреждение «объявлен, но его значение никогда не читается».

---

Я добавил const в начало маршрутов .ts

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

и добавленное значение в значке: icon: 'dashIcon'

Результат: 'dashIcon' объявлен, но его значение никогда не читается.

Answer 1

Попробуйте:

import Icon from "filePath/svgName";

Вы можете использовать этот значок в любой строке кода вниз. Например:

<img src={Icon}/>

Answer 2

Первое, что нужно помнить, это то, что все пути к файлам в React должны начинаться с «/», и что forward sla sh - это ссылка c на папку publi c. Независимо от того, где в коде вы находитесь по сравнению с папкой publi c, все пути к изображениям будут начинаться непосредственно в publi c.

Так что вы должны делать /dashboard_poker_cards.svg вместо того, чтобы идти один уровень, добавив две точки.

При работе с SVG я предпочитаю создавать их компоненты, а не импортировать их, как любой другой компонент.

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

export { YourSvg };

Таким образом, вы можете даже дать им реквизит, придать им динамический стиль c или изменить поведение по своему усмотрению, а также импортировать их следующим образом:

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

Answer 3

Укажите путь следующим образом:

icon: “./public/icons/icon_name”


icon: “public/icons/icon_name”

Я думаю, что все это может сработать.

Visual Studio имеет несколько путей расширения для .ts, поэтому установите их, тогда ваш способ будет стало очень легко:).