Icon.jsx (story file from storybook that is the consumer)

<Icon fileType="svg" icon="check" alt="check icon" />

Icon.tsx

class Icon extends React.PureComponent<Props, {}> {
  render() {
    const { fileType, size, gtmClass, alt, icon } = this.props;
    const isSvg = fileType === 'svg';

    const file = require(`../../resources/icons/${icon}.${
      isSvg ? 'svg' : 'png'
    }`);

    console.log('file is', file);

    const svgElement = isSvg ? (
      <div className={cStyles('icon', size, gtmClass)}>
        {
          <svg viewBox="0 0 60 60">
            <use xlinkHref={`#${file.url}`} />
          </svg>
        }
      </div>
    ) : (
      <img
        className={cStyles('icon', size, gtmClass)}
        alt={alt || ''}
        src={file}
      />
    );
    return svgElement || null;
  }
}

export default Icon;

plugins.js

const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

 const plugins = [,
    .....,
    new SpriteLoaderPlugin(),
  ];

rules.js

 ....
 
 {
      test: /\.svg$/,
      loader: 'svg-sprite-loader',
      options: {
        extract: true,
      },
    },
    
....