NX Monorepo中SVGR无法识别lib目录下的.svgrrc配置文件问题

以下是几个可行的解决方法，按优先级尝试：

1. 明确指定配置文件路径 #

SVGR默认在当前工作目录查找配置文件，但NX执行命令时默认处于monorepo根目录，导致无法识别icons库子目录下的.svgrrc。修改project.json中的svg命令，通过--config参数指定配置文件的绝对或相对路径：

// icons库的project.json
"targets": {
  "svg": {
    "executor": "nx:run-commands",
    "options": {
      "command": "svgr --config ./packages/icons/.svgrrc --out-dir ./packages/icons/src/icons ./packages/icons/assets/svg"
    }
  }
}

注意替换路径为你的icons库实际目录结构。

2. 切换命令执行的工作目录 #

在project.json的svg命令配置中添加cwd参数，将执行上下文切换到icons库目录，这样SVGR就能自动识别同目录下的.svgrrc：

"targets": {
  "svg": {
    "executor": "nx:run-commands",
    "options": {
      "command": "svgr --out-dir ./src/icons ./assets/svg",
      "cwd": "packages/icons" // 替换为你的icons库路径
    }
  }
}

3. 将SVGR配置移至package.json #

如果单独的.svgrrc文件仍无法被识别，可将配置直接写入icons库的package.json中，SVGR会自动读取该配置：

// icons库的package.json
{
  "name": "icons",
  // 其他配置...
  "svgr": {
    "icon": true,
    "dimensions": false,
    "replaceAttrValues": { "#000": "currentColor" }
    // 你的其他SVGR配置项
  }
}

此时svg命令无需指定--config参数，直接执行svgr --out-dir ./src/icons ./assets/svg即可。

4. 改用JS格式的配置文件 #

部分场景下，JSON格式的.svgrrc可能存在识别问题，将其改为.svgrrc.js格式（支持更灵活的配置逻辑），并确保路径正确：

// .svgrrc.js
module.exports = {
  icon: true,
  dimensions: false,
  // 你的配置项
};

然后在命令中指定该文件：svgr --config ./packages/icons/.svgrrc.js ...

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