Load svg using nuxt-svg-loader not working
Opened this issue · 0 comments
sanchopanda commented
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.