SVG loader returns a string instead of a symbol object when loading from storybook

versions:

    "svg-sprite-loader": "^3.7.3",
    "svgo": "^1.0.5",
    "svgo-loader": "^2.1.0",
    "ts-loader": "^4.1.0",
    "typescript": "^2.8.1",
    "webpack": "^4.3.0",
    "webpack-cli": "^2.0.13"

webpack configuration

{
    test: /\.svg$/,
    use: [
      {
        loader: 'svg-sprite-loader',
        options: {
          // extract: true,
          spriteFilename: "icon.svg"
        }
      }, {
        loader: 'svgo-loader',
        options: {
          plugins: [
            { removeTitle: true },
            { convertColors: { shorthex: false } },
            { convertPathData: false }
          ]
        }
      }]
  }

When importing a sprite:

import * as education from "../src/assets/svg/education.svg";

instead of getting a symbol object as depicted here, I’m getting a url in the form of:

/static/media/education.3a3782a8.svg

I can’t seem to find the reason causing it. Thanks in advance.

[dskline]

Probably due to a recent update, one of the webpack rules in the default storybook config has a rule.test that returns undefined now. I made a small tweak to the if statement:

  config.module.rules = config.module.rules.map((rule) => {
    if (rule.test && 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: /\.svg$/,
    loader: require.resolve("svg-sprite-loader"),
  });

[Pet3ris]

This is the full implementation if someone is interested:

  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: /\.svg$/i,
      loader: require.resolve('svg-sprite-loader')
    }
  );