transformAssetUrls not working

[gutisalex]

Description

Trying to use it with the transformAssetUrls option but get an error!

Output chrome dev console

[Vue warn]: Invalid prop: type check failed for prop "data". Expected Object, got String with value "@/assets/svg/mail.svg".

Code

main.ts

Vue.use<PluginOptions>(VueSvgIcon, {
  tagName: 'svg-icon'
});

myComponent

<template>
  <div>
  ...
    <svg-icon
          name="mail"
          data="@/assets/svg/mail.svg" />
  </div>
</template>

Configs

vue.config.js

chainWebpack(config) {
...
    config.module
      .rule('vue-svgicon')
      .test(/\.svg$/)
      .use('svgicon')
      .loader('@yzfe/vue-svgicon-loader')
      .options({
        idSeparator: '_',
        svgFilePath
      });

    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.transformAssetUrls = options.transformAssetUrls || {};
        options.transformAssetUrls.icon = ['data'];
        return options;
      });

    config.module.rule('svg').exclude.add(svgFilePath);

    config.resolve.symlinks(false);
  }

shims-vue.d.ts

...
// vue-svg-icon
declare module '*.svg' {
    import { Icon } from 'vue-svgicon';
    const resource: Icon;
    export default resource;
}

[gutisalex]

Came to conclusion that this line in webpack config matters a lot: options.transformAssetUrls.icon = ['data'];

So It works when I use icon as a tag, rename all of them in my components and when the icon is static: <icon name="mail" data="@/assets/svg/mail.svg" />

but when its dynamic though it still doesnt work: <icon v-if="item.meta.icon" :name="item.meta.icon" :data="'@icon/' + item.meta.icon + '.svg'" />

result is again: Vue warn]: Invalid prop: type check failed for prop "data". Expected Object, got String with value "@icon/settings.svg".

I also tried to add :data like: options.transformAssetUrls.svgicon = ['data', ':data']; but that doesnt work...

[alvaro-canepa]

@gutisalex it works if use require

<template>
  <div>
  ...
    <svg-icon
          name="mail"
          :data="require(`@/assets/svg/${icon}.svg`)" />
  </div>
</template>

[Allenice]

transformAssetUrls is not vue-svgicon's feature, you can read vue-loader for more informations.