Override SVG Loader in custom Webpack

Not sure whether this is explained somewhere, but I had to override the SVG loader used by Storybook to integrate SVG. In case someone stumbles upon this issue, here is what I have done in my custom Webpack config:

module.exports = ({ config }) => {
  // Don't use Storybook's default SVG Configuration
  config.module.rules = config.module.rules.map(rule => {
    if (rule.test.toString().includes('svg')) {
      const test = rule.test
        .toString()
        .replace('svg|', '')
        .replace(/\//g, '');
      return { ...rule, test: new RegExp(test) };
    } else {
      return rule;
    }
  });

  config.module.rules.push(
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader'],
    },
    {
      test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
      use: ['file-loader'],
    },
    {
      test: /stories\.(js|jsx)?$/,
      loaders: [require.resolve('@storybook/addon-storysource/loader')],
      enforce: 'pre',
    },
    // Use SVG Configuration for SVGR yourself
    {
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    },
  );

  return config;
};

In case there is another approach to this, please leave a comment. Anyway, just thought this may help someone who runs into the same thing.

[hazzo]

Thanks for the advice but I was having still problems because the generated regex was a string and with an extra \ and it could not load some fonts.

Here is my approach:

config.module.rules = config.module.rules.map(rule => {
    if (rule.test.toString().includes('svg')) {
      const test = rule.test.toString().replace('svg|', '').replace(/\//g, '')
      return { ...rule, test: new RegExp(test) }
    } else {
      return rule
    }
  })

It is actually working in conjunction with vue-svg-loader

[stale[bot]]

Hey there, it’s me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!