Vue-svg-loader: Vue-cli 3 use with vue-ant-design Icon component

Created on 14 Mar 2019  路  1Comment  路  Source: visualfanatic/vue-svg-loader

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
    }
  }
})

Most helpful comment

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

>All comments

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

RainArro picture RainArro  路  6Comments

AasmundEndresen picture AasmundEndresen  路  5Comments

MattCCC picture MattCCC  路  6Comments

edarioq picture edarioq  路  6Comments

jdfx picture jdfx  路  7Comments