react批量引入svg图标的方法

1. 安装：
	yarn add -D @type/webpack-env
2. 配置typescript.json
	"compilerOptions": {
		"types": ["@types/webpack-env"]
	}

import Icon from '@ant-design/icons';
// 批量引入
const importAll = (requireContext: __WebpackModuleApi.RequireContext) => {
  const requireAll = requireContext.keys().map(key => {
    const name = key.replace(/\.\/(.*)\.\w+$/, '$1');
    console.log(name, requireContext(key))
    return { name, value: requireContext(key) };
  })
  return requireAll
}
let routeList: {name: string, value: string}[] = []
try {
  routeList = importAll(require.context('../assets/icons', true, /\.svg$/))
} catch (error) {
  console.log(error);
  routeList = []
}
/**
 * 
 * 导出图标
 * 
 */
const IconFont = (props: {name: string, width?: string | number, className?: string}) => {
  const ListItem = routeList.find(item => item.name === props.name)
  return (
    <Icon
      component={() => (
        <img
          src={ListItem?.value}
          alt=""
          width={props.width || 16}
        />
      )}
      {...props}
    />
  );
};
export {
  IconFont
}

// 引入图标
import { IconFont } from '@/icons/sider_left_icon'
<IconFont
    name='library'
    width="23"
    className={styles.library_button_icon}
  />

"compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["@types/webpack-env"]
  },