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

Question

所以，我正在使用create-react-app，它使用了Webpack。

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

例如：

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

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