SVGR项目中如何正确配置SVGO插件

在使用SVGR工具处理SVG图标时，开发者经常会遇到需要自定义SVGO插件配置的情况。本文将通过一个典型场景，介绍如何正确配置SVGR和SVGO以实现保留viewBox属性的需求。

问题背景

在SVG优化过程中，SVGO默认会移除viewBox属性，这有时会导致图标显示异常。开发者需要覆盖默认配置来保留这个重要属性。然而，直接将SVGO配置写入SVGR配置文件会导致"Invalid plugin"错误。

配置分离原则

SVGR和SVGO虽然紧密相关，但它们的配置需要分开处理：

1. SVGR配置：负责组件生成相关的设置
2. SVGO配置：专门处理SVG优化相关的配置

正确配置方法

SVGR配置文件 (svgr.config.cjs)

module.exports = {
  typescript: true,
  prettierConfig: {
    parser: "typescript",
  },
};

这个文件包含SVGR特有的配置项：

• typescript: 生成TypeScript组件
• prettierConfig: 代码格式化配置

SVGO配置文件 (svgo.config.mjs)

export default {
  plugins: [
    {
      name: "preset-default",
      params: {
        overrides: {
          removeViewBox: false,
        },
      },
    },
  ],
};

这个文件专门配置SVGO插件：

• 使用preset-default预设
• 通过overrides参数覆盖默认配置
• 将removeViewBox设为false以保留viewBox属性

工作原理

SVGR会自动检测项目中的SVGO配置文件，开发者无需显式指定。这种设计实现了关注点分离：

• SVGR专注于将SVG转换为React组件
• SVGO专注于优化SVG代码

常见误区

1. 混合配置：将SVGO配置直接写入SVGR配置文件
2. 格式错误：使用CommonJS格式导出SVGO配置(应使用ESM)
3. 路径问题：配置文件不在项目根目录

最佳实践

1. 保持两个配置文件分离
2. 使用.mjs扩展名确保SVGO配置使用ESM格式
3. 将配置文件放在项目根目录
4. 通过npx envinfo命令检查环境兼容性

通过遵循这些原则，开发者可以灵活地定制SVGR和SVGO的行为，满足各种SVG处理需求。