WebPack，导入SVG而不是路径的完整源代码

Question

所以，我正在使用create-react-app使用引擎盖下的webpack。

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

eg：

import Download from './assets/download.svg';

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

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

Answer 1

您可以将SVG-Inline-Loader与WebPack一起使用。您可以安装运行此命令的加载程序

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

在您的WebPack配置文件中添加此行：

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

您将能够像这样导入您的SVG：

import logo from "./logo.svg";

要显示您的SVG，您将必须使用dangerouslySetInnerHTML llike以下：

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