【React】使用svg-sprite-loader+svgo-loader完成svg组件封装

1.安装svg-sprite-loader

 npm i svg-sprite-loader

2. 暴露webpack.config.js文件

安装完的svg-sprite-loader需要配置到webpack.config.js中才可以使用，初始的react项目的配置文件是封装好的，运行npm run eject可以将这些文件暴露出来，但注意这个操作不可逆。

npm run eject // 不可逆

3. 配置webpack.config.js文件

  {
     test: /\.svg$/,
     use: [
        { loader: 'svg-sprite-loader', options: {} }
      ]
  },

将这段代码加入到 webpack.config.js 的 module.rules 的 oneOf 中，注意原有的svg配置保留，不然会导致require进来的svg文件找不到路径

4. 创建自定义Icon组件

1）新建文件

在src目录下新建icons文件（文件具体位置不影响使用，只要引用地址正确就可以）

2）icon.js文件

import React from 'react';
import './icon.css'

const requireAll = (requireContext) => {
    return requireContext.keys().map(requireContext)
}
// require.context(要搜索的文件夹目录, 是否还应该搜索它的子目录, 匹配文件的正则表达式)
const req = require.context('./svg', true, /.svg$/)
requireAll(req)

const Icon = (props) => {
    return (
        <svg className="icon">
            <use xlinkHref={'#' + props.name}/>
        </svg>
    );
};
export default Icon;

3）icon.css文件

.icon{
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

5. 使用组件

import Icon from "../icons/icon";
function Example(){
    return(
        <div>
        	<Icon name="message"/>
        </div>
    )
}

6. 使用svgo-loader

到上一步，svg图标已经可以在页面显示了，但是要实现自定义颜色需要把svg文件中原有的fill属性去掉。当然手动更改svg文件也是可以的，但是安装svgo-loader自动删除会更加便捷

1）安装svgo-loader

npm i svgo-loader

2）配置webpack.config.js文件

在原来添加svg-sprite-loader的底下添加后，重启项目完成配置

  {
     test: /\.svg$/,
     use: [
        { loader: 'svg-sprite-loader', options: {} },
        { loader: 'svgo-loader', options: {
                    plugins:[
                      {
                        name: 'removeAttrs',
                        params: {
                          attrs: 'fill'
                        }
                      }//删除fill属性
                    ]
                  }
                }
      ]
  },