如何将整个SVG图像文件夹导入（或如何动态加载）到React Web App中？

如何将整个SVG图像文件夹导入（或如何动态加载）到React Web App中？

如果使用React，我强烈怀疑您也在使用Webpack。您可以使用

require.context

而不是es6，

import

并且Webpack会在构建时为您解决。

require.context ( folder, recurse, pattern )

• folder-字符串-开始扫描文件的文件夹路径。
• recurse-布尔值-是否递归扫描文件夹。
• pattern-RegExp-匹配模式，描述要包括的文件。
  
  

每个示例的第一行…

const reqSvgs = require.context ( './images', true, /.svg$/ )

…创建一个Require Context

*.svg

，将

images

文件夹中的所有文件路径映射到导入。这为我们提供了一个专门的Require
Function，

reqSvgs

并带有一些附加属性。

方法的属性之一

reqSvgs

是

keys

方法，它返回所有有效文件路径的列表。

const allSvgFilepaths = reqSvgs.keys ()

我们可以将这些文件路径之一传递

reqSvgs

给导入的图像。

const imagePath = allSvgFilePaths[0]const image = reqSvgs ( imagePath )

对于这个用例，此api具有约束力且不直观，因此我建议将集合转换为更常见的Javascript数据结构，以使其更易于使用。

转换期间将导入每个图像。
注意，因为这可能是步q。但是它提供了一种相当简单的机制，用于将多个文件复制到build文件夹，其余的源代码可能永远不会明确引用该文件。

这是3个可能有用的示例转换。

---

数组

创建一个导入文件的数组。

const reqSvgs = require.context ( './images', true, /.svg$/ )const paths = reqSvgs.keys ()const svgs = paths.map( path => reqSvgs ( path ) )

对象数组

创建一个对象数组，每个对象

{ path, file }

用于一个图像。

const reqSvgs = require.context ( './images', true, /.svg$/ )const svgs = reqSvgs  .keys ()  .map ( path => ({ path, file: reqSvgs ( path ) }) )

普通物体

创建一个对象，其中每个路径都是其匹配文件的键。

const reqSvgs = require.context ('./images', true, /.svg$/ )const svgs = reqSvgs  .keys ()  .reduce ( ( images, path ) => {    images[path] = reqSvgs ( path )    return images  }, {} )

---

SurviveJS在

require.context

此处 提供了更通用的SurviveJS
Webpack动态加载示例。