如何动态内联通过文件加载器加载的SVG？

Question

I was using svg-inline-loader to inline my SVGs which worked perfectly.

However, I also need to use those SVGs elsewhere not inline so I cannot using svg-inline-loader . I need to use file-loader to import my SVGs.

It seems like it would be easy to inline my SVGs, there are multiple components available that do just that. However, I also need to do it dynamically based on the name of the icon required.

This makes it awkward as I can't find a way to dynamically import a file and inline it on the page.

Using an import() doesn't work. Neither does require() .

<template>
    <span class="s-icon" v-bind:class="[typeAndSize, optionClasses]" v-html="icon"></span>
</template>

computed: {
    icon () {
        return () => import(`../../../../node_modules/my-lib/images/svg-icons/${this.name}.svg`);
    },

Has anyone tackled this issue before? Or can anyone point me in the right direction.

Edit

Further to my comment on the accepted answer this is the full solution I ended up with:

const icon = require(`!!svg-inline-loader!../../../../node_modules/my-lib/images/svg-icons/${this.name}.svg`);

Answer 1

You can use inline query string format, in order to apply only specific loader and ignore the rest.

const icon = require('!!file-loader!./icon.svg')

For dynamic imports you may look to require-context