【React】React18+Typescript+craco配置最小化批量引入Svg并应用的组件

本文链接：https://blog.youkuaiyun.com/harmsworth2016/article/details/137399800

该博客主要介绍了创建React + Typescript项目并批量引入Svg的方法。包括解决类型报错、覆盖webpack配置、生成Svg雪碧图、去除Svg属性等步骤，还提及封装Icon组件应用图标，以及配置别名解决报错等内容，总结了批量引入和配置别名的要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React18+Typescript+craco配置最小化批量引入Svg并应用的组件

前言

无论是哪种 Web UI 框架都不可避免的要与 Svg 打交道，那么批量引入才更方便管理 Svg。

创建React + Typescript项目

npx create-react-app my-ts-app --template typescript

通过require.context实现批量引入Svg

// src/assets/icons/index.ts
const requireAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().map(requireContext)
const icons = require.context('./', false, /\.svg$/)
requireAll(icons)

export {
   }

在这里插入图片描述

安装@types/webpack-env解决类型报错

npm install --save @types/webpack-env

安装craco，覆盖React原有的webpack配置文件

npm i -D @craco/craco @craco/types

修改package.json脚本快捷方式为craco启动项目

"scripts": {
   
-  "start": "react-scripts start"
+  "start": "craco start"
-  "build": "react-scripts build"
+  "build": "craco build"
-  "test": "react-scripts test"
+  "test": "craco test"
}