halfnelson / svelte-native

Svelte controlling native components via Nativescript
MIT License
1.82k stars 78 forks source link

SVG images support #333

Open dnicer3 opened 1 year ago

dnicer3 commented 1 year ago

I have spent long time trying to implement SVG images in my Svelte Native App, however, the only really working solution from other repositories is to transfer them to PNG. I have already tried many packages like svelte-inline-svg, svelte-svg etc. I have also tried to register in app.ts and use nativescript plugins such as nativescript-svg, ui-svg and so on, but still no response. The best what I have reached is just a blank screen. Could anyone please advise a proper solution?

FredericKarliczek commented 1 year ago

I managed to use a SVG image with the native script plugin "@nativescript-community/ui-svg" .

  1. Install the native script plugin:

    ns plugin add @nativescript-community/ui-svg
  2. Register the components in app.ts :

    
    import { registerNativeViewElement } from 'svelte-native/dom'
    import { svelteNativeNoFrame } from 'svelte-native'
    import App from './App.svelte'

registerNativeViewElement("canvasSVG", () => require("@nativescript-community/ui-svg").CanvasSVG); registerNativeViewElement("cSVG", () => require("@nativescript-community/ui-svg").SVG); registerNativeViewElement('svgView', () => require("@nativescript-community/ui-svg").SVGView);


3. Use new tags 'canvasSVG', 'cSVG', 'svgView':
```svelte
<canvasSVG>
  <cSVG horizontalAlignment="left" src="~/assets/red_blue_squares.svg" height="100%" width="100%" stretch="aspectFit" />
</canvasSVG>

I had also to specify the width which was not specified in the example of the plugin. Hope this helps.

dnicer3 commented 1 year ago

@FredericKarliczek That plugin for me ismthe closest one to the solution, because I don't get errors within it. However, anyway I have an issue - it throws me "SvelteNativeDom: set attribute threw an error, attr:src on csvg: SVGKImage is not defined" error, Maybe there are some extra dependencies or extra rollup configurations?

farfromrefug commented 1 year ago

@dnicer3 you need to share the callstack for your error. also you should try with the svgView which is a simple view on which you can defined a src prop (and stretch,...) for the svg