Support SVGR also within Storybook

Expected Behavior

Webpack conf generated by the Storybook schematics should have the same conf for SVGR the main webpack conf has.

Current Behavior

Nx-generated Storybook conf doesn’t support SVGR out of the box.

Context

Please provide any relevant information about your setup:

• version of Nx used

  @nrwl/angular : Not Found
  @nrwl/cli : 9.2.2
  @nrwl/cypress : 9.2.2
  @nrwl/eslint-plugin-nx : 9.2.2
  @nrwl/express : Not Found
  @nrwl/jest : 9.2.2
  @nrwl/linter : 9.2.2
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : 9.2.2
  @nrwl/react : 9.2.2
  @nrwl/schematics : Not Found
  @nrwl/tao : 9.2.2
  @nrwl/web : 9.2.2
  @nrwl/workspace : 9.2.2
  typescript : 3.8.3

• 3rd-party libraries and their versions

  "dependencies": {
    "document-register-element": "1.13.1",
    "react": "16.12.0",
    "react-dom": "16.12.0"
  },
  "devDependencies": {
    "@babel/core": "7.8.3",
    "@nrwl/cypress": "9.2.2",
    "@nrwl/eslint-plugin-nx": "9.2.2",
    "@nrwl/jest": "9.2.2",
    "@nrwl/react": "9.2.2",
    "@nrwl/storybook": "^9.2.2",
    "@nrwl/web": "9.2.2",
    "@nrwl/workspace": "9.2.2",
    "@storybook/addon-a11y": "5.3.18",
    "@storybook/addon-docs": "5.3.18",
    "@storybook/addon-jest": "5.3.18",
    "@storybook/addon-knobs": "5.3.18",
    "@storybook/addon-viewport": "5.3.18",
    "@storybook/react": "5.3.18",
    "@storybook/source-loader": "5.3.18",
    "@testing-library/react": "9.4.0",
    "@types/jest": "25.1.4",
    "@types/node": "~8.9.4",
    "@types/react": "16.9.17",
    "@types/react-dom": "16.9.4",
    "@typescript-eslint/eslint-plugin": "2.19.2",
    "@typescript-eslint/parser": "2.19.2",
    "babel-loader": "8.0.6",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "cypress": "^4.1.0",
    "cz-conventional-changelog": "^3.1.0",
    "dotenv": "6.2.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.4.4",
    "eslint": "6.8.0",
    "eslint-config-prettier": "6.0.0",
    "eslint-plugin-import": "2.19.1",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.17.0",
    "eslint-plugin-react-hooks": "2.3.0",
    "jest": "25.2.3",
    "prettier": "1.19.1",
    "react-docgen-typescript-loader": "^3.7.2",
    "ts-jest": "25.2.1",
    "ts-node": "~7.0.0",
    "tslint": "~6.0.0",
    "typescript": "~3.8.3"
  },

Other

And this is how I managed to make it work:

    // Workaround for https://github.com/nrwl/nx/issues/2320
    const path = require('path');
    config.resolve.alias['@myscope/icons'] = path.resolve(__dirname, '../../icons/src/lib/');

    // Disable default handling of SVGs
    const svgRuleIndex = config.module.rules.findIndex(rule => {
      const { test } = rule;

      return test.toString().startsWith('/\\.(svg|ico');
    });
    config.module.rules[svgRuleIndex].test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;

    // Add same SVGR configuration as main Nx
    // See: https://github.com/jaysoo/nx/blob/20885513ae4fe4f03a64bb738d4816d8ed7c77c6/packages/react/plugins/webpack.ts
    config.module.rules.push(
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        loader: 'url-loader',
        options: {
          limit: 10000, // 10kB
          name: '[name].[hash:7].[ext]',
        },
      },
      {
        test: /\.svg$/,
        oneOf: [
          // If coming from JS/TS file, then transform into React component using SVGR.
          {
            issuer: {
              test: /\.[jt]sx?$/,
            },
            use: [
              '@svgr/webpack?-svgo,+titleProp,+ref![path]',
              {
                loader: 'url-loader',
                options: {
                  limit: 10000, // 10kB
                  name: '[name].[hash:7].[ext]',
                },
              },
            ],
          },
          // Fallback to plain URL loader.
          {
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 10000, // 10kB
                  name: '[name].[hash:7].[ext]',
                },
              },
            ],
          },
        ],
      },
    );

[trumbitta]

@mandarini oh nice! Thank you! These days I’m working on a different part of the monorepo, but I will update it shortly after the next release!

[trumbitta]

I also had to add this rollup.config.js to make my components lib build into a publishable library:

/* eslint-disable @typescript-eslint/no-var-requires */
module.exports = (config) => {
  const svgr = require('@svgr/rollup').default;
  const url = require('@rollup/plugin-url');

  return {
    ...config,
    plugins: [
      ...config.plugins,
      url(),
      svgr({
        svgo: false,
        ref: true,
        titleProp: true,
      }),
    ],
  };
};