Recently, I started working with NX Monorepo that consists of 2 separate react applications. In order to share icons between these apps, I decided to create an icons library.
I made changes to the project.json file of the icons library and added a svg command as follows:
{
"name": "icons",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "libs/icons/src",
"projectType": "library",
"tags": [],
"targets": {
"svg": {
"command": "svgr libs/icons/assets",
"configurations": {
}
},
"lint": {
"executor": "@nx/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["libs/icons/**/*.{ts,tsx,js,jsx}"]
}
},
"build": {
"executor": "@nx/vite:build",
"outputs": ["{options.outputPath}"],
"defaultConfiguration": "production",
"options": {
"outputPath": "dist/libs/icons"
},
"configurations": {
"development": {
"mode": "development"
},
"production": {
"mode": "production"
}
}
}
}
}
However, when I execute the yarn nx run icons:svg command, it throws the following error:
Directory are not supported without `--out-dir` option instead.
Warning: run-commands command "svgr libs/icons/assets" exited with non-zero status code
To resolve this issue, I modified the svg command to include the --out-dir option which enabled SVGR to successfully generate the icons.
Now, my next step is to instruct SVGR to use the provided .svgrrc file for configuration:
{
"icon": true,
"dimensions": false,
"expandProps": true,
"typescript": true,
"outDir":"src/",
"replaceAttrValues": {
"#000":"currentColor",
"#292D32":"currentColor"
}
}