Load SVG files as components NextJS + Storybook

Look for the .storybook/main.ts file and add:

...
webpackFinal: async (config) => {
  config.module = config.module || {};
  config.module.rules = config.module.rules || [];

  // This modifies the existing image rule to exclude .svg files
  // since you want to handle those files with @svgr/webpack
  const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
  if (imageRule) {
    imageRule['exclude'] = /\.svg$/;
  }

  // Configure .svg files to be loaded with @svgr/webpack
  config.module.rules.push({
    test: /\.svg$/,
    use: ['@svgr/webpack'],
  });

  return config;
},

Same here look for next.config.js file and add:

...
// Enable SVG Components
// More info: https://github.com/vercel/next.js/tree/canary/examples/svg-components
webpack(config) {
  config.module.rules.push({
    test: /\.svg$/i,
    issuer: /\.[jt]sx?$/,
    use: ['@svgr/webpack'],
  });

  return config;
},

Enjoy!!