search

seiyable / vue-simple-svg

A simple Vue.js plugin that allows you to load a SVG image as an inline SVG with an access to change its fill colors
MIT License
80 stars 23 forks source link

Console error: No svg element found. Did you pass a valid .svg file? #17

Open simon-hayden opened 5 years ago

simon-hayden commented 5 years ago

When using simple-svg with v-show or v-if it produces a console error. For example, a situation like this

<simple-svg :filepath="dataProp.icon" v-if="dataPropCondition" /> <simple-svg :filepath="dataProp.icon2" v-else />

seems to work absolutely fine, but produces error in console:

No svg element found. Did you pass a valid .svg file? with stack trace:

  Event @ Location
  updateSVGStyle @ plugin.js?b047:1
  fill @ plugin.js?b047:1
  run @ vue.runtime.esm.js?2b0e:4562
  flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4304
  (anonymous) @ vue.runtime.esm.js?2b0e:1980
  flushCallbacks @ vue.runtime.esm.js?2b0e:1906
  Promise.then (async)    
  timerFunc @ vue.runtime.esm.js?2b0e:1933
  nextTick @ vue.runtime.esm.js?2b0e:1990
  queueWatcher @ vue.runtime.esm.js?2b0e:4396
  update @ vue.runtime.esm.js?2b0e:4538
  notify @ vue.runtime.esm.js?2b0e:730
  mutator @ vue.runtime.esm.js?2b0e:882
  setType @ FiltersRequirements.vue?2515:248
  click @ FiltersRequirements.vue?c45a:21
  invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
  invoker @ vue.runtime.esm.js?2b0e:2179
  original._wrapper @ vue.runtime.esm.js?2b0e:6911

Seems there is no problem with the component functionality and the SVGs load fine for both states, other than a very, very quick FOUC the first time the icons loads, which would only happen once per SVG with cache implementation as per Issue #6 re: cache.

I was just wondering, what is this error and why?