Ask questionsLoad svg using vue-svg-loader not working
.storybook/webpack.config.js
const path = require('path');
const fs = require('fs');
// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
// `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.
// Make whatever fine-grained changes you need
config.module.rules.push({
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
});
config.module.rules.push({
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {name: 'assets/[name].[hash:8].[ext]'},
},
],
});
config.module.rules.push({
test: /\.vue$/,
use: [
{
loader: "vue-svg-inline-loader",
options: { /* ... */ }
}
]
});
config.module.rules.push({
test: /\.svg$/,
loader: 'vue-svg-loader',
options: {name: 'assets/[name].[hash:8].[ext]'},
});
config.resolve.alias['@'] = path.resolve('src')
// Return the altered config
return { ...config, node: { fs: 'empty' } };
};
index.vue
<template>
<div>
<IconTest/>
</div>
</template>
<script>
import IconTest from "@/assets/svg/test-icon.svg"
export default {
components:{
IconTest
}
}
</script>
error:
[Vue warn]: Invalid Component definition: static/media/test-icon.d9ed9e17.svg