fix(react): load svg component in buildable library (#12226)

package.json

@@ -75,14 +75,15 @@
     "@rollup/plugin-image": "^2.1.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-url": "^7.0.0",
     "@schematics/angular": "~15.0.1",
     "@storybook/addon-essentials": "~6.5.9",
     "@storybook/angular": "^6.5.12",
     "@storybook/builder-webpack5": "~6.5.9",
     "@storybook/core-server": "~6.5.9",
     "@storybook/manager-webpack5": "~6.5.9",
     "@storybook/react": "~6.5.9",
-    "@storybook/theming": "~6.5.9",
+    "@svgr/rollup": "^6.1.2",
     "@svgr/webpack": "^6.1.2",
     "@swc-node/register": "^1.4.2",
     "@swc/cli": "~0.1.55",

packages/react/plugins/bundle-rollup.ts

@@ -1,5 +1,8 @@
 import * as rollup from 'rollup';
 
+const url = require('@rollup/plugin-url');
+const svg = require('@svgr/rollup');
+
 function getRollupOptions(options: rollup.RollupOptions) {
   const extraGlobals = {
     react: 'React',
@@ -8,6 +11,7 @@ function getRollupOptions(options: rollup.RollupOptions) {
     '@emotion/react': 'emotionReact',
     '@emotion/styled': 'emotionStyled',
   };
+
   if (Array.isArray(options.output)) {
     options.output.forEach((o) => {
       o.globals = { ...o.globals, ...extraGlobals };
@@ -21,6 +25,19 @@ function getRollupOptions(options: rollup.RollupOptions) {
       },
     };
   }
+
+  options.plugins = [
+    svg({
+      svgo: false,
+      titleProp: true,
+      ref: true,
+    }),
+    url({
+      limit: 10000, // 10kB
+    }),
+    ...options.plugins,
+  ];
+
   return options;
 }
 

packages/react/src/generators/library/lib/add-rollup-build-target.ts

@@ -1,5 +1,6 @@
 import { Tree } from 'nx/src/generators/tree';
 import {
+  addDependenciesToPackageJson,
   ensurePackage,
   getWorkspaceLayout,
   joinPathFragments,
@@ -9,7 +10,11 @@ import {
 
 import { maybeJs } from './maybe-js';
 import { NormalizedSchema } from '../schema';
-import { nxVersion } from '../../../utils/versions';
+import {
+  nxVersion,
+  rollupPluginUrlVersion,
+  svgrRollupVersion,
+} from '../../../utils/versions';
 
 export async function addRollupBuildTarget(
   host: Tree,
@@ -18,6 +23,16 @@ export async function addRollupBuildTarget(
   await ensurePackage(host, '@nrwl/rollup', nxVersion);
   const { rollupInitGenerator } = await import('@nrwl/rollup');
 
+  // These are used in `@nrwl/react/plugins/bundle-rollup`
+  addDependenciesToPackageJson(
+    host,
+    {},
+    {
+      '@rollup/plugin-url': rollupPluginUrlVersion,
+      '@svgr/rollup': svgrRollupVersion,
+    }
+  );
+
   const { targets } = readProjectConfiguration(host, options.name);
 
   const { libsDir } = getWorkspaceLayout(host);

packages/react/src/utils/versions.ts

@@ -57,3 +57,7 @@ export const moduleFederationNodeVersion = '~0.9.6';
 export const lessVersion = '3.12.2';
 export const sassVersion = '^1.55.0';
 export const stylusVersion = '^0.55.0';
+
+// rollup plugins (if needed)
+export const rollupPluginUrlVersion = '^7.0.0';
+export const svgrRollupVersion = '^6.1.2';

scripts/depcheck/missing.ts

@@ -87,6 +87,8 @@ const IGNORE_MATCHES_IN_PACKAGE = {
     '@module-federation/node',
     '@phenomnomnominal/tsquery',
     '@pmmmwh/react-refresh-webpack-plugin',
+    '@svgr/rollup',
+    '@rollup/plugin-url',
     '@svgr/webpack',
     '@swc/jest',
     'babel-jest',