javascript - Webpack，导入 SVG 的完整源代码而不是路径

Question

因此，我正在使用 create-react-app，它在后台使用 Webpack。

我最近遇到了一种情况，我想提取 SVG 的源代码。然而，Webpack 的默认行为是显示文件的路径，而不是实际的代码。

例如:

从'./assets/download.svg'导入下载；

转换为:/static/media/download.b251eb57.svg

是否可以使用 Webpack 直接导入实际代码？

Answer 1

您可以使用 svg-inline-loader与网页包。您可以运行此命令安装此加载器

npm install svg-inline-loader --save-dev

在你的 webpack 配置文件中添加这一行:

{ test: /\.svg$/, loader: 'svg-inline-loader' }  

然后您将能够像这样导入您的 SVG:

import logo from "./logo.svg";

要显示您的 SVG，您必须像这样使用 dangerouslySetInnerHTML:

<div dangerouslySetInnerHTML={{__html: logo}} />