Load SVGs components in storybook VUE not working

Question

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

(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

---

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>

---

.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

has anyone come across this or can you show your use cases of using SVGs components in Storybook and Vue 3?