react 中使用 svg-sprite-loader

1、npm i svg-sprite-loader svgo-loader -D

2、在craco中加入webpack配置

webpack: {
    configure: (webpackConfig, { env, paths }) => {
            webpackConfig.module.rules[1].oneOf = [
                ...[
                    {
                        test: /\.svg$/,
                        include: [pathResolve('src/icons')],
                        use: [
                            { loader: 'svg-sprite-loader', options: {} },
                            {
                                loader: 'svgo-loader',
                                options: {
                                    plugins: [
                                        // 插件名字必须加
                                        {
                                            name: 'removeAttrs',
                                            params: {
                                                attrs: '(fill|stroke)',
                                            },
                                        },
                                    ],
                                },
                            },
                        ],
                    },
                ],
                ...webpackConfig.module.rules[1].oneOf,
            ];
            return webpackConfig;
        },
}

3、在src目录下新建icons/index.js

const req = require.context('../icons', true, /\.svg$/);
//路径、是否渗入子目录 匹配规则
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);

4、src/index.js 引入icons/index.js

5、component下新建icon容器组件

const SvgIcon = ({ iconClass, className }) => {
    const svgClass = className ? 'svg-icon ' + className : 'svg-icon';
    const iconName = `#${iconClass}`;
    return (
        <svg className={svgClass} aria-hidden="true">
                <use xlinkHref={iconName} />
        </svg>
    );
};

6、使用组件

<SvgIcon iconClass="" className="">