Repository: storybook
Issue: [Bug]: Load SVGs components in storybook VUE not working
Labels: question / support,configuration babel / webpack,vue3

### Describe the bug

Hello everyone I'm using ```vue 3``` with ```storybook 6.5.16``` and when i import the SVGs as a component using ``svg-inline-loader`` i get the following error in storybook app:

[enter image description here](https://i.stack.imgur.com/0jLsq.png)
> (Failed to execute 'createElement' on 'Document' svg is not a valid name)

---

**Storybook main.js**
```
const path = require('path');

module.exports = {
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: '@storybook/vue3',
  core: {
    builder: '@storybook/builder-webpack5',
  },

  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: "sass-loader",
          options: {
            additionalData: `
              @import "@/assets/scss/main.scss";
            `,
            implementation: require('sass'),
          },
        },
      ],
    });

    (() => {
      const ruleSVG = config.module.rules.find(rule => {
        if (rule.test) {
          const test = rule.test.toString();
          const regular = /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
          const regularString = regular.toString();
          
          if (test === regularString) {
            return rule;
          }
        }
      });
  
      ruleSVG.test = /\.(ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
    })();

    config.module.rules.push({
      test: /\.svg$/,
      use: ['svg-inline-loader'],
    });

    config.resolve.alias['@'] = path.resolve('src');

    return config;
  },
}
```
---

**package.json file**

[enter image description here](https://i.stack.imgur.com/aHF9a.png)

---

**SVG Vue components**

```
<template>
  <div 
    ref="icon"
    class="v-icon"
    @click="onClick"
  >
    <component
      :is="iconName"
      class="v-icon__svg"
    />
  </div>
</template>

<script>
import Cards from '@/assets/icons/Cards.svg';

export default {
  name: 'VIcon',
  components: {
    Cards,
  },

  props: {
    iconName: {
      type: String,
      required: true,
    },
  },
};
</script>
```



### To Reproduce

_No response_

### System

```shell
System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i5-10400F CPU @ 2.90GHz
  Binaries:
    Node: 18.0.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.6.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.41)
  npmPackages:
    @storybook/addon-actions: 6.5.16 => 6.5.16
    @storybook/addon-essentials: 6.5.16 => 6.5.16
    @storybook/addon-interactions: 6.5.16 => 6.5.16
    @storybook/addon-links: 6.5.16 => 6.5.16
    @storybook/builder-webpack5: 6.5.16 => 6.5.16
    @storybook/manager-webpack5: 6.5.16 => 6.5.16
    @storybook/testing-library: 0.0.13 => 0.0.13
    @storybook/vue3: 6.5.16 => 6.5.16
```


### Additional context

**.babelrc file**

```
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```

---

i tried to use ```vue-svg-loader``` to replace ```svg-inline-loader``` but it didn't work and I got another error while building the app

`ModuleBuildError: Module build failed: Error: Cannot find module './Block'`

---

I also tried to use ```babel-loader``` in conjunction with ```vue-svg-loader``` but unfortunately I also got an error:

[enter image description here](https://i.stack.imgur.com/DC4Bp.png)

**has anyone come across this or can you show your use cases of using SVGs components in Storybook and Vue 3?**