Модуль не найден в файлах SVG в реакции

Question

У меня в ответе есть строка html, которая постоянно выдаёт мне эту ошибку

GET http://localhost:3000/icons.svg 404 (Не найдено)

<svg className="olymp-menu-icon">
    <use xlinkHref="./icons.svg#olymp-menu-icon" />
</svg>

И мой каталог настроен следующим образом

1. HTML-страницы (основной каталог)

   • Login.js (в настоящее время работает над этим компонентом)

   • icons.svg (внутри той же директории, что и Login.js)

А вот фрагмент из моих icons.svg

<symbol id="olymp-menu-icon" viewBox="0 0 41 32">
<title>menu-icon</title>
<path d="M4.571 0h-4.571v4.571h4.571v-4.571zM9.143 0v4.571h32v-4.571h-32zM13.714 13.714h-13.714v4.571h13.714v-4.571zM18.286 13.714v4.571h4.571v-4.571h-4.571zM27.429 18.286h13.714v-4.571h-13.714v4.571zM0 32h32v-4.569h-32v4.569zM36.571 32h4.571v-4.569h-4.571v4.569z"></path>
</symbol>

Answer 1

Вы можете сделать это.

пример создания-реакции-приложения: https://github.com/facebook/create-react-app/blob/26f701fd60cece427d0e6c5a0ae98a5c79993640/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js

// in Login.js
import { MenuIcon } from './icons.svg';

// use
<MenuIcon id="icon" />

Вы применяете это.

https://github.com/FWeinb/babel-plugin-named-asset-import

https://github.com/facebook/create-react-app/blob/4a87838f527a00be6af42099546ff5d3adf63a6a/packages/react-scripts/config/webpack.config.dev.js#L238-L249