【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 中，注意原有的svg配置保留，不然会导致require进来的svg文件找不到路径

{
              test: /.svg$/,
              use: [
                {
                  loader: require.resolve('@svgr/webpack'),
                  options: {
                    prettier: false,
                    svgo: false,
                    svgoConfig: {
                      plugins: [{ removeViewBox: false }],
                    },
                    titleProp: true,
                    ref: true,
                  },
                },
                {
                  loader: require.resolve('file-loader'),
                  options: {
                    name: 'static/media/[name].[hash].[ext]',
                  },
                },
              ],
              issuer: {
                and: [/.(ts|tsx|js|jsx|md|mdx)$/],
              },
            },
//---start--
            {
              test: /.svg$/,
              use: [
                 { loader: 'svg-sprite-loader', options: {} }
               ]
           },   
//---end ---      

4. 创建自定义Icon组件

2）icon文件夹下的index.tsx

import React from 'react';
import './index.scss'

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

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

3）icon文件夹下的index.scss(fill: currentColor; 可以删除svg文件下的fill颜色通过改变color改变svg的颜色)

.icon{
    width: 20px;
    height: 20px;
    fill: currentColor;
    overflow: hidden;
}

5. 使用组件

import React, { Component } from 'react'
import SVG from '../../icons/index'
import './index.scss'
export default class Home extends Component {
  render() {
    return (
      <div className='home'>
        <SVG name="icon-eye"/>
      </div>
    )
  }
}

.home{
    color: red;
}

6. 使用svgo-loader

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

1）安装svgo-loader

npm i svgo-loader

2）配置webpack.config.js文件

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