CODEWITHSUNDEEP
javascriptsvgvue.jsvue-component
Jon
Jon

Reputation: 3203

How do I dynamically inline an SVG loaded via file-loader?

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`);

Upvotes: 2

Views: 2401

Answers (1)

Ruslan
Ruslan

Reputation: 762

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

Upvotes: 4

Related Questions