react 中使用 SvgIcon

先放代码，然后再解释。

// 文件目录
src/
--assets/
  --svgs/
    --test.svg
--components/
  --SvgIcon/
    --icons.js
    --index.js
    --style.css
--index.js

// index.js
// 引入 svg 图标
import './components/SvgIcon/icons'

// components/SvgIcon/icons.js
// 引入所有的svg的文件
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context('../../assets/svgs/', false, /\.svg$/);
requireAll(req)

// components/SvgIcon/index.js
import React, { Component } from 'react';
import './style.css';

class SvgIcon extends Component {
  render() {
    const iconName = `#icon-${this.props.iconClass}`;
    return (
      <svg className="svg-icon" aria-hidden="true">
        <use xlinkHref={ iconName }></use>
      </svg>
    )
  }
}

export default SvgIcon;

// components/SvgIcon/style.css
:global .svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

// webpack.config.js
var webpack = require('webpack');

var path = require('path')
function resolve(dir) {
    return path.join(__dirname, '.', dir)
}

module.exports = function (webpackConfig, env) {
    // 要从默认配置的 rules[1] 中将相关目录排除掉
    webpackConfig.module.rules[1].exclude.push(resolve('src/assets/svgs'))
    webpackConfig.module.rules.push({
        test: /\.svg$/,
        include: resolve('src/assets/svgs'),
        use: [
            {
                loader: 'svg-sprite-loader',
                options: {
                    symbolId: 'icon-[name]',
                }
            }
        ]
    })
}

以上是 dva 的配置。先不解释了，都懂的。