Load svg using nuxt-svg-loader not working

[sanchopanda]

I have a project on nuxt, I want to use storybook, there is a problem with load svg to storybook build.

<template>
  <div :class="wrapperClasses">
    <div class="nav-arrows__buttons">
      <button type="button" class="nav-arrows__button" title="Назад" aria-label="Назад">
        <ArrowIcon/>
      </button>
      <button type="button" class="nav-arrows__button" title="Вперед" aria-label="Вперед">
        <ArrowIcon/>
      </button>
    </div>
  </div>
</template>

<script>

import ArrowIcon from '@/assets/icons/24/ar_big_left.svg';

using nuxt-svg-loader, if i build the project itself, then everything is fine, but when building the storybook, it gives an error

export default function nuxtSvgLoader() {
^^^^^^

SyntaxError: Unexpected token 'export'

in storybook/main.js I setup like this

 let rule = config.module.rules.find(r =>
      // it can be another rule with file loader
      // we should get only svg related
      r.test && r.test.toString().includes('svg') &&
      // file-loader might be resolved to js file path so "endsWith" is not reliable enough
      r.loader && r.loader.includes('file-loader')
    );
    rule.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/;

    config.module.rules.unshift(  {
      test: /\.svg$/,
      use: ['nuxt-svg-loader']
    });

also tried vue-svg-loader

 config.module.rules.push(
      {
        test: /\.svg$/,
        use: ['vue-svg-loader']
      }
    )

in this case it gives the following error

Module build failed (from ./node_modules/vue-svg-loader/index.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) Error in parsing SVG: Non-whitespace before first tag.