CODEWITHSUNDEEP
javascriptnode.jsvue.jssvgquasar-framework
kzaiwo
kzaiwo

Reputation: 1768

Use SVG from node_modules

I created a node_module with all svg files to modularize our architecture.

It works fine when I call it using:

<q-icon>
  <svg>
    <use xlink:href="~svgmodule/svgs/icons.svg#addicon"></use>
  </svg>
</q-icon>

However when doing like this:

<q-icon>
  <svg>
    <use :xlink:href="'~svgmodule/svgs/icons.svg#' + iconParameter"></use>
  </svg>
</q-icon>

And iconParameter is defined below as:

iconParameter: 'addicon'

This is the error I am getting:

vue.runtime.esm.js?0594:6757 GET http://localhost:8080/~svgmodule/svgs/icons.svg net::ERR_ABORTED 404 (Not Found)

I also tried this and it works:

<use xlink:href="../../../../../../../../node_modules/svgmodule/svgs/icons.svg#addicon"></use>

But this one doesnt:

<use :xlink:href="'../../../../../../../../node_modules/svgmodule/svgs/icons.svg#' + iconParameter"></use>

Nor

<use :xlink:href="'../../../../../../../../node_modules/svgmodule/svgs/icons.svg#addicon'"></use>

Help!!

Upvotes: 5

Views: 2121

Answers (1)

Daniel
Daniel

Reputation: 596

vue-loader does not convert expressions into webpack module requests.

You have to manually call require. This is what vue-loader does internally.

<q-icon>
  <svg>
    <use :xlink:href="require('~svgmodule/svgs/icons.svg') + '#' + iconParameter"></use>
  </svg>
</q-icon>

Upvotes: 3

Related Questions