使用create-react-library创建的React TypeScript库中SVG资源未被打包至dist目录的问题求助

嘿，这个问题我之前也碰到过！microbundle 默认不会自动处理 SVG 这类静态资源，所以才会出现打包后 dist 里没资源、测试项目看不到图片的情况。给你几个实用的解决方案，按你的需求选就行：

方案1：把SVG转为React组件导入（最推荐） #

这种方式完全贴合 React 组件化的思路，不需要额外处理资源文件，打包后直接把 SVG 内容编译进 JS 代码里，不会有路径问题。

步骤很简单：

• 把你的 SVG 文件改成 .tsx 格式，比如命名为 MyIcon.tsx
• 将 SVG 内容直接作为 React 组件导出，示例代码：

// src/components/A/MyIcon.tsx
import React from 'react';

const MyIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    {/* 这里粘贴你的SVG原内容 */}
  </svg>
);

export default MyIcon;

• 在组件A中导入这个React组件并使用：

// src/components/A/index.tsx
import React from 'react';
import MyIcon from './MyIcon';

const ComponentA = () => (
  <div className="component-a">
    <MyIcon />
    {/* 其他组件内容 */}
  </div>
);

export default ComponentA;

这样重新执行 npm run build 后，microbundle 会把 SVG 组件当成普通TS代码打包，测试项目里使用组件A就能正常看到图标了。

方案2：手动复制SVG资源到dist目录 #

如果你不想转成React组件，可以通过脚本在编译后把SVG复制到dist目录，保证引用路径正确。

步骤如下：

1. 安装 copyfiles 工具（用来复制文件）：

npm install copyfiles --save-dev

2. 修改 package.json 里的 build 脚本，在microbundle编译后添加复制命令：

{
  "scripts": {
    "build": "microbundle && copyfiles -u 1 src/components/A/*.svg dist/"
  }
}

这里的 -u 1 是指去掉一级源目录（比如 src/components/A/icon.svg 会被复制到 dist/icon.svg）。
3. 组件A中引用SVG的路径要对应dist里的位置，比如：

import React from 'react';

const ComponentA = () => (
  <div>
    <img src="./icon.svg" alt="My SVG" />
  </div>
);

如果你的SVG放在单独的assets目录（比如 src/assets/icon.svg），可以把复制命令改成 copyfiles -u 1 src/assets/*.svg dist/assets/，组件里引用 ./assets/icon.svg 即可。

方案3：将SVG转为Base64内嵌到组件 #

适合小型SVG图标，直接把SVG内容转成Base64字符串，内嵌到组件代码里，完全不需要处理资源文件。

步骤：

1. 用Base64编码工具把你的SVG内容转成Base64字符串
2. 在组件A中直接引用这个Base64字符串：

import React from 'react';

// 替换成你自己的SVG Base64内容
const svgBase64 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMmM1LjUxNCAwIDEwIDQuNDg2IDEwIDEwSDFjMC01LjUxNCA0LjQ4Ni0xMCAxMC0xMHoiLz48L3N2Zz4=';

const ComponentA = () => (
  <div>
    <img src={svgBase64} alt="My Icon" />
  </div>
);

export default ComponentA;

这种方式打包后不会产生额外资源文件，直接把图标内容内嵌到JS里，适合体积小的SVG。

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