javascript - 尝试使用 raw-loader 加载 svg 时出现包错误

Question

我的目标是使用 raw-loader 将 svg 作为原始字符串读入，然后使用 dangerouslySetInnerHTML 将此 svg 字符串添加到 div，从而呈现 svg。但是，我在导入 svg 时遇到了问题。我在控制台中收到以下神秘错误:“Uncaught SyntaxError: Unexpected string”。该错误似乎来自 bundle.js。当我单击它以了解更多信息时，它突出显示的行是

/* harmony default export */ __webpack_exports__["default"] = (undefined"<svg width=\"36\" height=\"36\" viewBox=\"0 0 40 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M2 1V14.0263L29.3553 16.1974L2 18.3684V31.3947L35 16.1974L2 1Z\" fill=\"#2996CC\"/>\n  <path d=\"M2 1V14.0263L29.3553 16.1974L2 18.3684V31.3947L35 16.1974L2 1Z\" stroke=\"#2996CC\" stroke-width=\"0.434211\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");

因为我使用的是 webpack(版本 4.39.2)，所以我必须编写一个规则来导入 svgs。我使用的规则是:

{ test: /\.svg$/, loader: "raw-loader" },

然后在 .jsx 文件中(我使用的是 reactjs)，我使用

import sendIcon from "./SVGs/Plane.svg";

实际的 div 看起来像

<div
    className="RefreshIcon"
    dangerouslySetInnerHTML={{ __html: planeIcon }}
/>

有趣的是，如果我在编译之前运行 rm -rf node_modules 那么一切都很好。但是，这似乎很老套，我想尽可能避免使用该解决方案。我把它包括在内只是因为它可以帮助深入了解主要问题是什么。

我希望看到 svg 正确显示，但整个屏幕除了“正在加载”文本外都是清晰的，我在控制台中收到上述错误。

Answer 1

Svg 应该与文件加载器一起使用

module: {
        rules: [
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]
    }

您可以查看我的完整配置here