一般来说引入SVG网站有两种方法，一是直接将SVG直接作为图片引入，二是通过SVG-Symbol来引入(这里使用svg-sprite-loader)。
方式一有一个明显的缺点，无法修改图片颜色。
一般使用第二种方法加载SVG。
通过create-react-app创建的React项目，初始并没有webpack的配置文件，需要使用命令行yarn eject获得该文件（不可撤销）。

Get Start

根据svg-sprite-loader和svgo-loader文档安装并配置。

  1. //svg-sprite-loader
  2. npm install svg-sprite-loader -D
  3. # via yarn
  4. yarn add svg-sprite-loader -D
  6. //svgo-loader
  7. npm install svgo svgo-loader --save-dev
  8. yarn add svgo svgo-loader -D
  12. // webpack >= 2 multiple loaders
  13. {
  14.   test: /\.svg$/,
  15.   use: [
  16.     { loader: 'svg-sprite-loader', options: { ... } },
  17.     'svg-transform-loader',
  18.     'svgo-loader'
  19.   ]
  20. }
  23. //Put the SVGO config into loader's options
  24.  module.exports = {
  25.   ...,
  26.   module: {
  27.     rules: [
  28.       {
  29.         test: /\.svg$/,
  30.         use: [
  31.           {loader: 'file-loader'},
  32.           {
  33.             loader: 'svgo-loader',
  34.             options: {
  35.               plugins: [
  36.                 {removeTitle: true},
  37.                 {convertColors: {shorthex: false}},
  38.                 {convertPathData: false}
  39.               ]
  40.             }
  41.           }
  42.         ]
  43.       }
  44.     ]
  45.   }
  46. }
  49. //在项目中引用，可以通过CSS修改
  50. <svg>
  51.         <use xlinkHref={'#' + id}/>}
  52. </svg>

require

如果使用import方法引入SVG，单使用图片无法显示。
这是webpack编译造成的：
当声明变量但不使用，webpack在编译时会将其删除，不会出现在页面。产生该现象的理由是TreeShaking。
解决方法也比较简单，使用require()代替import即可，TreeShaking不适用于require。

去除SVG自带颜色

参考svgo文档，可以通过在配置中添加下列代码得到。

  1.  *     removeAttrs:
  2.  *       attrs: 'fill'

一次引入整个目录的SVG

  1. let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
  2. try {
  3.     importAll(require.context('icons', true, /\.svg$/));   //icons为目录名
  4. } catch (error) {
  5.     console.log(error);
  6. }

这样就能任意引入该目录下的所有SVG文件了。