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

小编典典

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

reactjs

我有一个组件，它带有一个：itemName并吐出一个包含图像的html包。每个捆绑包的图像都不同。

这是我所拥有的：

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

import SVGInline from "react-svg-inline";

export default (props) => (
  <NavLink className="hex" activeClassName="active" to={'/hex/' + props.itemName}> {React.createElement(SVGInline, {svg: props.itemName})} </NavLink>
)

如何使该组件正常工作？

我知道，如果我只是显式导入所有图像，则可以这样称呼我的图像…

import SVGInline from "react-svg-inline";
import SASSSVG from "./images/sass.svg";

<NavLink className="hex" activeClassName="active" to="/hex/sass"><SVGInline svg={ SASSSVG } /></NavLink>

这可以工作，但是由于我需要包含约60个svg，因此会添加很多多余的代码。

另外，我在这个问题中发现了这段代码…

import * as IconID from './icons';

但这似乎不起作用（这是问题的一部分，而不是答案），而且答案有点不太明确，无法回答我要问的问题。

我也找到了这个问题，但还是有一个答案（尽管未经批准），它的问题多于它的答案。因此，在安装react-
svg之后，我进行了测试以查看答案是否像这样…

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import { NavLink } from 'react-router-dom';
import ReactSVG from 'react-svg'

export default (props) => (
  <NavLink className="hex" activeClassName="active" to={'/hex/' + props.itemName}>
    <ReactSVG
      path={"images/" + props.itemName + ".svg"}
      callback={svg => console.log(svg)}
      className="example"
    />
  </NavLink>
)

但是，正如该问题的操作要问的那样，即使将整个图像文件夹复制到构建文件夹后，页面也找不到我的svg。我也尝试过“ ./images/”

我觉得我只是在丢失最后一条关键信息，在搜索了过去的一天之后，我希望有人能够识别出我所缺少的信息。

阅读 686

2020-07-22

共1个答案

小编典典

如果使用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数据结构，以使其更易于使用。

转换期间将导入每个图像。
注意，因为这可能是步枪。但是它提供了一种相当简单的机制，用于将多个文件复制到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动态加载示例。

2020-07-22