使用webpack将SVG加载为模块

Question

我试图让我的webpack过滤svg导入并使用这些文件生成反应组件。

这是我的webpacker配置：

//config/webpack/development.js
const merge = require("webpack-merge");
const environment = require("./environment");
const svg_react_loader = require("./custom/svg-react-loader");

module.exports = merge(environment.toWebpackConfig(), svg_react_loader);

//config/webpack/custom/svg-react-loader
module.exports = {
  module: {
    loaders: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: "babel-loader"
          },
          {
            loader: "react-svg-loader",
            options: {
              jsx: true // true outputs JSX tags
            }
          }
        ]
      }
    ]
  }
};

我在我的组件中导入svg文件，如下所示：

import ProjectLogo from "./images/project.svg";

我在浏览器控制台中遇到的错误是：

react-dom.development.js?cada:6050 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/packs/bundles/Project/components/LogoPage/images/project-f15c8edd029d0f795dd71e3e39079866.svg') is not a valid name.
    at createElement (webpack-internal:///250:6050:36)
    at createInstance (webpack-internal:///250:16908:22)
    at completeWork (webpack-internal:///250:10916:31)
    at completeUnitOfWork (webpack-internal:///250:12481:18)
    at performUnitOfWork (webpack-internal:///250:12580:14)
    at workLoop (webpack-internal:///250:12682:28)
    at HTMLUnknownElement.callCallback (webpack-internal:///250:1299:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///250:1338:16)
    at invokeGuardedCallback (webpack-internal:///250:1195:27)
    at performWork (webpack-internal:///250:12800:7)
createElement @ react-dom.development.js?cada:6050
createInstance @ react-dom.development.js?cada:16908
completeWork @ react-dom.development.js?cada:10916
completeUnitOfWork @ react-dom.development.js?cada:12481
performUnitOfWork @ react-dom.development.js?cada:12580
workLoop @ react-dom.development.js?cada:12682
callCallback @ react-dom.development.js?cada:1299
invokeGuardedCallbackDev @ react-dom.development.js?cada:1338
invokeGuardedCallback @ react-dom.development.js?cada:1195
performWork @ react-dom.development.js?cada:12800
scheduleUpdateImpl @ react-dom.development.js?cada:13185
scheduleUpdate @ react-dom.development.js?cada:13124
scheduleTopLevelUpdate @ react-dom.development.js?cada:13395
updateContainer @ react-dom.development.js?cada:13425
(anonymous) @ react-dom.development.js?cada:17105
unbatchedUpdates @ react-dom.development.js?cada:13256
renderSubtreeIntoContainer @ react-dom.development.js?cada:17104
render @ react-dom.development.js?cada:17129
render @ clientStartup.js?eb41:154
forEach @ clientStartup.js?eb41:64
forEachComponent @ clientStartup.js?eb41:76
reactOnRailsPageLoaded @ clientStartup.js?eb41:177
(anonymous) @ clientStartup.js?eb41:232