search

peoplewareDo / nativescript-svg

Nativescript plugin - support for .SVG file format
Other
70 stars 55 forks source link

NativeScript Vue integration #38

Open mitskovets opened 5 years ago

mitskovets commented 5 years ago

How to use this plugin for the nativescript-vue?

CAJazzer commented 5 years ago

1) Install per the instructions: 

tns plugin add nativescript-svg

2) Add the following to main.js:

import Vue from 'nativescript-vue'
Vue.registerElement('SVGImage', () => require('nativescript-svg').SVGImage)

3) Use as any other Component:

<SVGImage src="~/assets/images/nativescript.svg" height="100" />
victorsosa commented 5 years ago

can you commit a PR with that in the readme file, please?

mitskovets commented 5 years ago

Sorry for my english ) I do exactly that, but the SVG is not displayed, it is on the page (width & height) , it is empty, no color, no fill, why? Used different files SVG, no difference.

CAJazzer commented 5 years ago

Sorry, should have mentioned that I am using iOS. I am having the same problem testing with Android (image is empty).

janakact commented 5 years ago

I got the same problem. Not working on Android.

felipebueno commented 5 years ago

Same problem here :(

Is there any workaround for that?

sebj54 commented 5 years ago

I made it work with this fork: https://github.com/exeleon/nativescript-svg I only tested it on Android Pie (for now) with Nativescript-Vue and it's working fine!

jawa-the-hutt commented 5 years ago

@sebj54 I've tried this on Oreo and Pie and can't get it to show up. Did you do anything different than described above to have an image display?

  1. tns plugin add @exeleon/nativescript-svg
  2. Vue.registerElement('SVGImage', () => require('@exeleon/nativescript-svg').SVGImage);
  3. <SVGImage src="~/assets/images/nativescript.svg" height="100" />

EDIT: nevermind, got it working: case-sensitive pathing. Filename started with a capital letter but the path did not.

EDIT 2: It works in Oreo and Pie for me, but that's all I've tested so far.

bonkboykz commented 5 years ago

I had the same problem with SVG not displaying. This steps helped me:

  1. Removing the nativescript-svg tns plugin remove nativescript-svg
  2. Installing its fork by @teammaestro tns plugin add @teammaestro/nativescript-svg
  3. (!) Placing all of the svg files under the ~/assets/images folder, like ~/assets/images/icons/*.svg (I think it's the step that resolved the issue, not the fork installation)
  4. Steps 2 and 3 from @CAJazzer 's comment

Edit: I did my research and turns out there is a bug on Android and the second step fixes it

ray007 commented 4 years ago

Any chance whatever makes the other 2 versions mentioned above work on android gets ported to here?

doron-bv commented 3 years ago

Hi Guys, any chance someone know if there is any existing issue i'm not a ware of in case src is a url ? for e.g: <SVGImage src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/face.svg"/> if i use the local assets, it works fine. only the link url doesn't work Any advise will be much appreciated. I'm currently using the teammaestro 1.0.1 with nativescript vue 6.2 Thank you!

edsel77 commented 3 years ago

I had the same problem with SVG not displaying. This steps helped me:

  1. Removing the nativescript-svg tns plugin remove nativescript-svg
  2. Installing its fork by @teammaestro tns plugin add @teammaestro/nativescript-svg
  3. ~(!) Placing all of the svg files under the ~/assets/images folder, like ~/assets/images/icons/*.svg (I think it's the step that resolved the issue, not the fork installation)~
  4. Steps 2 and 3 from @CAJazzer 's comment

Edit: I did my research and turns out there is a bug on Android and the second step fixes it

I am using Nativescript 7 and tried using this but got this error JS: TypeError: Class constructor View cannot be invoked without 'new'

sebj54 commented 3 years ago

@edsel77 You should use this fork for NativeScript 7: https://github.com/SergeyMell/nativescript-plugins/tree/main/packages/nativescript-svg