svg-sprite-loader引入多个svg

之前博客写了如何引入svg：

React使用svg-sprite-loader引入svg #掘金文章# juejin.cn/post/699551…

当我们需要引入多个svg的时候呢？不想一个个都这样引入吧？

这里做一下思路总结，具体配置视项目结构而定。

lib目录下创建一个js用于导入指定目录下所有的svg：

这里我放在了icon文件夹里边，这样的话 js 里面路径要改成../icons/'，icons里面放的是svg文件

importAll方法找到requireContext所有的key，对应每个key执行requireContext

//importIcons.js代码
let importAll = (requireContext) => 
requireContext.keys().forEach(requireContext)
try {
  importAll(require.context('../icons/', true, /\.svg$/))
} catch (error) {
}

然后之前的单个引入也需要改一下，在需要引入的文件里面改引入这个JS文件：

import './icon/importIcons'

————————分割线——————

静态引入和非静态引入

静态引入：方便我们tree-shaking，当我们使用第三方库的时候（里面有不少方法）静态方法是选择性引入的方式，可以在webpack打包的时候只打包使用到的方法代码从而达到减少打包的体积的目的。

非静态引入：只是方便，不会实现tree-shaking。