Repository: storybook
Issue: [Bug]: SVGs are NOT displayed if imported with alias
Labels: question / support,configuration babel / webpack

### Describe the bug

I'm using SVGs in my react components this way:

```import AppStore from "@/UI/icons/apple.svg"```
```<img src={AppStore} />```

where ```@``` is an alias from ```webpack.config.json```:

https://github.com/meri-maki/storybook-issue/blob/main/config/webpack.config.js


```
resolve: {
			alias: {
				"~": path.resolve(__dirname, "./src"),
				"@": path.resolve(__dirname, "./public/assets"),
			},
			...
```

I have updated storybook config accordingly
```webpack.config.js``` in ```.storybook```

```
import webpack from "webpack"
import path from "path"
import MiniCssExtractPlugin from "mini-css-extract-plugin"

function buildCssLoader(isDev: boolean) {
    return {
        test: /\.s[ac]ss$/i,
        use: [
            isDev ? "style-loader" : MiniCssExtractPlugin.loader,
            {
                loader: "css-loader",
                options: {
                    modules: {
                        auto: (resPath: string) =>
                            Boolean(resPath.includes(".module.")),
                        localIdentName: isDev
                            ? "[path][name]__[local]--[hash:base64:8]"
                            : "[hash:base64:8]",
                    },
                },
            },
            // Compiles Sass to CSS
            "sass-loader",
        ],
    }
}


export default ({ config }) => {
    const paths = {
        build: "",
        html: "",
        entry: "",
        src: path.resolve(__dirname, "..", "..", "src"),
    }
    config.resolve?.modules?.push(paths.src)
    config.resolve?.extensions?.push(".js", ".jsx")

    config.resolve.alias = {
      ...config.resolve.alias,
      '~': path.resolve(__dirname, '..', 'src',),
      '@': path.resolve(__dirname, '..','public','assets'),
    }



    if (config.module?.rules) {
    // eslint-disable-next-line no-param-reassign
        config.module.rules = config.module?.rules?.map(
            (rule: webpack.RuleSetRule | "...") => {
                if (rule !== "..." && /svg/.test(rule.test as string)) {
                    return { ...rule, exclude: /\.svg$/i }
                }

                return rule
            }
        )
    }

    config.module?.rules?.push({
        test: /\.svg$/,
        use: ["@svgr/webpack"],
    })
    config.module?.rules?.push(buildCssLoader(true))

    return config
}
```

But the component in storybook looks like this:
![Снимок экрана 2024-01-17 в 22 29 09](https://github.com/storybookjs/storybook/assets/97887955/b6ba8009-c3d2-4318-b774-c0a6fec4e8df)



### To Reproduce

https://github.com/meri-maki/storybook-issue

npm i
npm start - see button with icon
npm storybook - see storybook where the icon is absent

### System

```bash
Storybook Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.4 - ~/node_modules/.bin/npm <----- active
  Browsers:
    Chrome: 120.0.6099.216
    Safari: 16.3
  npmPackages:
    @storybook/addon-essentials: ^7.6.9 => 7.6.9 
    @storybook/addon-interactions: ^7.6.9 => 7.6.9 
    @storybook/addon-links: ^7.6.9 => 7.6.9 
    @storybook/addon-onboarding: ^1.0.10 => 1.0.10 
    @storybook/addon-styling-webpack: ^0.0.6 => 0.0.6 
    @storybook/blocks: ^7.6.9 => 7.6.9 
    @storybook/react: ^7.6.9 => 7.6.9 
    @storybook/react-webpack5: ^7.6.9 => 7.6.9 
    @storybook/test: ^7.6.9 => 7.6.9 
    chromatic: ^10.3.0 => 10.3.1 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    storybook: ^7.6.9 => 7.6.9
```


### Additional context

_No response_