react-create-app（react17+craco）使用svg

安装svg插件

npm install svg-sprite-loader svgo-loader --dev

 修改craco.config.js配置

const path = require('path');
const resolve = dir => path.resolve(__dirname, dir)
​
module.exports = {
  webpack:{
    alias: {
      '@': resolve('src')
    },
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig.module.rules[1].oneOf = [
          ...[
              {
                  test: /.svg$/,
                  // 存放svg的文件夹
                  include: resolve('./src/static/svg'),
                  use: [
                    { loader: 'svg-sprite-loader', options: {} },
                    { loader: 'svgo-loader', options: {symbolId: "icon-[name]"} },
                  ],
              },
          ],
          ...webpackConfig.module.rules[1].oneOf,
      ];
      return webpackConfig;
    },
  },
  devServer: {
    open: false,
  },
}

 引入全局的svg图片，在svg文件夹下创建index.js文件，代码如下

// 使用 require.context 获取指定文件夹下的所有 SVG 文件
const importAll = r => {
  const svgs = {};
  r.keys().map(key => {
    return (svgs[key] = r(key));
  });
  return Object.keys(svgs);
};
const iconList = importAll(require.context('./svg', false, /\.svg$/));

// 获取图标icon-(*).svg名称列表, 例如[shouye, xitong, zhedie, ...]
export const getNameList = () => {
  const regex = /\/icon-(.*?)\.svg/;
  return iconList.map(item => item.match(regex)[1]);
};

 封装svg组件IconSvg.js

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

const IconSvg = React.memo(({ width, height, name, className }) => {
  return (
    <svg className={className || 'icon-svg'} aria-hidden="true" width={width} height={height}>
      <use xlinkHref={'#icon-' + name}></use>
    </svg>
  );
});

export default IconSvg;

.icon-svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}

 在其他组件中使用

import * as Icon from '@/icons';
import IconSvg from '@components/IconSvg';

const App = ()=> {
  const [iconList] = useState(Icon.getNameList());
  return (
    <>
     {iconList.map((item, index) => <IconSvg name={item} />)}
    </>
  )
}