TypeScript如何批量导出默认导入无需重复书写名称

你对两种SVG导入方式的理解完全正确：

• 直接默认导入SVG文件，拿到的是构建工具处理后生成的静态资源访问路径，适合传入<img>标签的src属性使用
• 通过import { ReactComponent as Xxx } from 'xxx.svg'导入的是封装好的React组件，渲染时会直接在DOM中插入内联SVG节点，支持直接通过props控制尺寸、填充色等属性，和img引入路径的渲染逻辑有本质区别。

关于你提到的导入导出冗余问题，原生ES模块没有提供可以一次性批量重导出多个独立文件默认导出的语法：export *语法只会重导出目标模块的所有具名导出，不会处理每个模块的default导出，所以没法靠一行export *实现你的需求，你可以选下面两种实用方案解决：

方案1：合并导入导出语句（零配置，原生ES标准支持，最推荐） #

你不需要分开写独立的import块和export块，可以直接在导出语句中完成模块引入和重命名，每新增一个资源只需要写一行代码，不用重复写两次标识符：

export { default as BlueSquarePath } from "./logo-square-block.svg";
export { default as LoadingSpinner } from "./loading-spinner.svg";
export { default as Logo } from "./logo-all-black-text.svg";
export { default as LogoTextPath } from "./logo-text-only.svg";
export { default as UserImpactIcon } from "./user-impact-icon.svg";

这种写法和你之前分开写import+export的效果完全一致，外部引用方式没有任何变化，只是省去了先导入再手动列导出项的重复操作。

方案2：构建工具批量自动导入（适合SVG资源量大、不想手动维护导出列表的场景） #

如果项目里的图片资源很多，每次新增都要写一行导出还是麻烦，可以借助你用的打包工具提供的批量导入能力，自动扫描目录下的SVG文件生成导出，完全不用手动维护列表。
以Vite为例，代码如下：

// 扫描当前目录下所有.svg文件，同步导入每个文件的默认导出（即资源路径）
const svgFiles = import.meta.glob('./*.svg', {
  eager: true,
  import: 'default'
})

// 按规则自动生成导出名：将kebab-case文件名转为大驼峰格式，和你之前的命名规则保持一致
const generatedExports = Object.entries(svgFiles).reduce((result, [filePath, assetPath]) => {
  const fileName = filePath.split('/').pop()?.replace('.svg', '') ?? ''
  const exportName = fileName
    .split('-')
    .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
    .join('')
  result[exportName] = assetPath as string
  return result
}, {} as Record<string, string>)

// 支持两种使用方式：1. 整体导入对象 2. 解构具名导入
export default generatedExports
export const {
  BlueSquarePath,
  LoadingSpinner,
  Logo,
  LogoTextPath,
  UserImpactIcon
} = generatedExports

如果用Webpack，可以把上面的import.meta.glob替换成require.context实现同样的效果。
这种方案下，你只要把新的SVG文件丢到对应目录，就可以直接在代码里引用，不需要手动改index.tsx的导出逻辑。如果不想维护具名导出的解构列表，也可以直接用默认导出的对象，使用时写法如下：

import images from 'assets/images'

const MyComponent: React.FC = () => (
  <img src={images.UserImpactIcon} />
)

内容的提问来源于stack exchange，提问作者Seth Lutske