Loading svgs from different packages

[Gwalchmei]

I want to dynamically load svg from consumer projects and from a "core" dependency project but I manage to only load files located in my consumer projects. I don't know if I'm missing something in my config or if it is a bug.

Core project

- src/
  - assets/
    - svg/
      - foo.svg
  - components/
    - Icon.vue

Icon.vue

<template>
  <div :is="svg" class="..." />
</template>

<script>
export default {
  name: 'Icon',
  props: { core: Boolean, name: String },
  computed: {
    svg() {
      return this.core
        ? require('@core/assets/svg/'+this.name+'.svg')
        : require('@/assets/svg/'+this.name+'.svg');
    },
};
</script>

Consumer projets

- src/
  - assets/
    - svg/
      - bar.svg
  - vue.config.js

vue.config.js

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .test(/\/svg\/.*\.svg$/)
      .use('babel-loader')
      .loader('babel-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .options({
        svgo: {
          plugins: [{ cleanupIDs: false }],
        },
      })
      .end();
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@core': 'package-name/src',
      },
    },
  },
}

And then in my components

<Icon core name="foo" /> <!-- Does not work -->
<Icon name="bar" /> <!-- Works -->

I have the following error

Error: Cannot find module './svg/foo.svg'
    at webpackContextResolve (eval at ./node_modules/package-name/src/assets sync recursive ^\.\/.*\.svg$ 
    at webpackContext (eval at ./node_modules/package-name/src/assets sync recursive ^\.\/.*\.svg$