Father 项目中 SVG 组件引用的最佳实践

在使用 Father 构建组件库时，处理 SVG 图标资源是一个常见需求。本文将详细介绍如何在 Father 项目中正确引用 SVG 作为 React 组件，并解决开发与生产环境中的兼容性问题。

SVG 作为 React 组件的常见问题

在组件库开发中，开发者经常希望将 SVG 文件作为 React 组件直接导入使用。常见的做法是使用 import { ReactComponent as Icon } from './icon.svg' 语法。然而，这种语法依赖于 SVGR 转换工具的支持，在不同环境中可能会遇到以下问题：

1. 开发环境（dumi）中 SVG 显示正常，但构建后的组件在生产环境中无法正确渲染
2. 控制台报错提示组件未定义或类型无效
3. SVG 转换后的组件在生产环境中丢失

根本原因分析

这些问题源于不同环境对 SVG 处理方式的差异：

• dumi（基于 Umi）内置支持 SVGR，开发时能正确转换 SVG
• 但生产环境可能缺少相应的转换配置，导致 SVG 未被正确处理
• 组件库构建时未将 SVG 转换逻辑包含在输出中

解决方案：使用 inline-react-svg 插件

Father 提供了通过 Babel 插件处理 SVG 的能力。推荐使用 inline-react-svg 插件在构建时内联转换 SVG 资源：

// .fatherrc.ts
export default {
  extraBabelPlugins: [
    [
      'inline-react-svg',
      {
        svgo: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  removeViewBox: false, // 保留 viewBox 属性
                },
              },
            },
            'removeDimensions', // 移除 width/height 属性
            'convertStyleToAttrs', // 将样式转换为属性
          ],
        },
      },
    ],
  ],
}

配置解析

1. inline-react-svg：将 SVG 文件转换为内联的 React 组件
2. svgo 优化配置：
   • preset-default：启用默认优化配置
   • overrides.removeViewBox: false：保留 viewBox 确保响应式缩放
   • removeDimensions：移除固定尺寸使 SVG 更灵活
   • convertStyleToAttrs：提高渲染性能

实现原理

这种方案的核心优势在于：

1. 构建时转换：在组件库构建阶段就将 SVG 转换为 React 组件代码
2. 无运行时依赖：不要求使用方项目配置 SVGR
3. 体积优化：通过 SVGO 对 SVG 进行压缩优化
4. 兼容性强：生成的组件可在任何 React 环境中使用

替代方案比较

除了上述方案，开发者还可以考虑：

1. 手动转换：使用 SVGR CLI 提前将 SVG 转换为 React 组件文件

   • 优点：完全可控
   • 缺点：维护成本高，不适合大量 SVG

2. 作为资源引入：将 SVG 作为普通图片资源引入

   • 优点：简单直接
   • 缺点：无法直接修改 SVG 样式和属性

3. 使用 SVG 雪碧图：将所有 SVG 合并为一个文件

   • 优点：减少请求数量
   • 缺点：灵活性较低

相比之下，inline-react-svg 方案在灵活性和便利性之间取得了最佳平衡。

实际应用建议

1. 对于简单项目，直接使用 inline-react-svg 配置即可
2. 对于复杂项目，可以结合多种方案：
   • 常用图标使用 inline-react-svg
   • 大型 SVG 作为资源引入
   • 需要动态修改的 SVG 手动转换为组件
3. 始终保留原始 SVG 文件作为设计资源

总结

在 Father 项目中正确处理 SVG 资源需要理解不同环境的处理机制差异。通过合理配置 inline-react-svg 插件，开发者可以构建出在各种环境下都能正常工作的 SVG 组件，同时享受 SVG 的矢量优势和 React 的组件化特性。这种方案既保持了开发体验的一致性，又确保了生产环境的可靠性，是组件库开发中的最佳实践之一。