damianstasik / vue-svg-loader

🔨 webpack loader that lets you use SVG files as Vue components
https://vue-svg-loader.js.org
MIT License
645 stars 86 forks source link

Vue-cli 3 use with vue-ant-design Icon component #77

Open zhuzhuaicoding opened 5 years ago

zhuzhuaicoding commented 5 years ago

You can use chainWebpack

 const svgRule = config.module.rule('svg');
        svgRule.use('file-loader').tap(options => {
            originalOptions = options;
        });
        svgRule.uses.clear();

        svgRule
            .oneOf('svg-component')
                .resourceQuery(/\?component/)
                    .use('vue-svg-loader')
                        .loader('vue-svg-loader')
                        .end()
                    .end()
            .oneOf('normal')
                .use('file-loader')
                    .loader('file-loader')
                    .options(originalOptions);

preserve the file-loader ,at the sametime you can add svg component feature for

import MessageSvg from 'path/to/message.svg?component'; // path to your '*.svg' file.

new Vue({
  el: '#app',
  template: '<a-icon :component="MessageSvg" />',
  data() {
    return {
      MessageSvg
    }
  }
})
zhuzhuaicoding commented 5 years ago

fix img src=[Object Module] bug in vue component template