在反应中的 SVG 文件上找不到模块答案

【问题标题】：Module not found on SVG files in react在反应中的 SVG 文件上找不到模块
【发布时间】：2019-02-12 22:38:27
【问题描述】：

我的反应中有这行 html 一直给我这个错误

GET http://localhost:3000/icons.svg 404（未找到）

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

我的目录设置如下

HTML 页面（主目录）
- Login.js（目前正在开发这个组件）
- icons.svg（与 Login.js 位于同一目录内）

这是我的 icons.svg 中的一个 sn-p

<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>

【问题讨论】：

您对目录结构的表示并不完全清楚。 icon.svg 文件是否与 HTML 页面在同一目录中？
是的。让我多阅读格式化工具
login.js 和 icons.svg 之间的相对路径无关紧要。必须在传递网页的网址（显然是localhost:3000/）和可以传递资源的地址之间给出相对路径。它的工作方式与任何<img src> 属性的工作方式相同。或者你有什么花哨的 webpack 配置可以内联 svg 资源？

标签： html reactjs svg

【解决方案1】：

你可以这样做。

create-react-app 示例：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

【讨论】：

我试过这个，但现在我得到一个字符串（用于内置组件）或一个类/函数（用于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。'