Support SVGs can be placed in a custom output directory

[jasonhuang-sky]

Hey folks, when using the Nx Webpack plugins to generate the Webpack configuration, we can use NxReactWebpackPlugin to handle React SVGR, which is great, but it doesn't provide any options to place the extracted SVGs in a custom directory after the build, rather than just in the output root directory.

e.g.

{
      output: {
        path: join(__dirname, '../../dist/apps/demo'),
      },
      plugins: [
        new NxAppWebpackPlugin({
          main: paths.appIndexJs,
          tsConfig: paths.appTsConfig,
          baseHref: paths.publicUrlOrPath,
        }),
        new NxReactWebpackPlugin({}),
      ],
    }

If we use the above webpack configuration, the extracted SVGs will be placed in the directory dist/apps/demo, but we may would like to put all these SVGs in a custom directory for easy management, such as dist/apps/demo/media, and unfortunately applyReactConfig does not provide such an option.

So my proposal is, could we add an option to the applyReactConfig function to configure a custom outDir?

e.g.

config.module.rules.push({
      test: /\.svg$/,
      issuer: /\.(js|ts|md)x?$/,
      use: [
        {
          loader: require.resolve('@svgr/webpack'),
          options: svgrOptions,
        },
        {
          loader: require.resolve('file-loader'),
          options: {
            name: `${outDir}[name].[hash].[ext]`,
          },
        },
      ],
    });

The default value of the options outDir is '', but for my case, we can configure the outDir as static/, what do you think?