profile
viewpoint

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

storybookjs/storybook

Answer questions gsaada

Thank you @devtoni ! Works!

useful!
source:https://uonfu.com/
Github User Rank List