search

oliverfindl / vue-svg-inline-plugin

Vue plugin for inline replacement of SVG images with actual content of SVG files.
MIT License
33 stars 3 forks source link

Support variable src #1

Closed depsimon closed 3 years ago

depsimon commented 3 years ago

Thanks for this plugin.

I was wondering how we could make it work with variable paths?

I made an Icon component like this:

<img
  v-svg-inline
  :src="`/@/assets/icons/${style}/${icon}.svg`"
  class="svg-icon"
/>

It works while in development (yarn dev) but once building for production it fails.

There is an error in the console:

[vue-svg-inline-plugin] TypeError: [vue-svg-inline-plugin] Argument property is not valid! [file.content="<!DOCTYPE html>
.. content of my index.html

Can this be done? If not, what approach would you recommend instead?

Cheers

oliverfindl commented 3 years ago

Hello.

For your first issue, to keep it short, it won't work this way. This plugin creates new SVG node, transfers all attributes from image node to SVG node (that includes parsed initial state variables used in Vue bindings) and then replaces image node with SVG node. This process doesn't include transfer of Vue bindings, because I cannot figure way to clone them into SVG node. Therefore it does not work way you want to use it.

For your second issue, it's related to your Webpack (or whatever you are using) or webserver configuration. As it's client side library, you can open your devtools, switch to network tab and watch what assets it tries to download. In your case, it's downloading your /index.html file, that may be caused by requesting not-existent file or by wrong rewrite rules.

If you have more questions, feel free to ask here.

Thanks.

depsimon commented 3 years ago

The second issue is probably a side effect of the first one. But now I know why.

Thanks for you response!