npm package: @sergeymell/nativescript-svg
Description: Nativescript SVG plugin
Author: Victor Sosa
Latest version: 1.1.2

# NativeScript SVG

The similar version of this plugin for the NativeScript 6
is available [here](https://github.com/jnorkus/nativescript-svg)

### Disclaimer

> This plugin is almost fully based on the source code of [Victor Sossa](https://github.com/peoplewareDo/nativescript-svg) and [Juras Norkus](https://github.com/jnorkus/nativescript-svg).  
> Thank you guys for your hard work and contributions!

### Installation

```javascript
ns plugin add @sergeymell/nativescript-svg
```

### Prerequisites

Before starting using the plugin make sure your svg
images will be copied to the build.
This can be done by updating `webpack.config.js`.
Add this line to the targets of `CopyWebpackPlugin` instance

```javascript
{ from: '**/*.svg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
```

so it should look something like this:

```javascript
new CopyWebpackPlugin({
  patterns: [
    { from: 'assets/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: 'fonts/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: '**/*.jpg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: '**/*.png', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: '**/*.svg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
  ],
}),
```

### Usage

You use it in the same way you use Image source.

| Android Library                                               | iOS CocoaPod                                         |
| ------------------------------------------------------------- | ---------------------------------------------------- |
| [pents90 svg-android](https://github.com/pents90/svg-android) | [SVGKit by SVGKit](https://github.com/SVGKit/SVGKit) |

** there are limitations: ** - saveToFile is not working

## API

##### ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG

- Loads this instance from the specified resource name.

##### ImageSourceSVGModule.fromFile(path: string): ImageSourceSVG

- Creates a new ImageSourceSVG instance and loads it from the specified file.

##### ImageSourceSVGModule.fromData(data: any): ImageSourceSVG

- Creates a new ImageSourceSVG instance and loads it from the specified resource name.

##### ImageSourceSVGModule.fromBase64(source: string): ImageSourceSVG

- Creates a new ImageSourceSVG instance and loads it from the specified resource name.

##### ImageSourceSVGModule.fromUrl(url: string): Promise:ImageSourceSVG

- Downloads the image from the provided Url and creates a new ImageSourceSVG instance from it.

---

You can call every method in two ways, for example:

```
//from the svf file object
svgFile.loadFromResource(name: string): boolean  // synchronously
svgFile.fromResource(name: string): ImageSourceSVG //asynchronously
```

or

```
//from the svg module api
ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG
```

Since ver 1.1 Implement a similar image tag to be used as for example:

```xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:svg="@sergeymell/nativescript-svg" loaded="pageLoaded">
  <StackLayout>
    <!--svg image tag-->
    <svg:SVGImage src="~/image/nativescript.svg" height="100" />
    <svg:SVGImage src="https://media4.giphy.com/media/3uyIgVxP1qAjS/200.svg" height="200" />

    <!--normal image tag-->
    <Image src="~/images/logo.svg" stretch ="none" />
  </StackLayout>
</Page>
```

### Usage within Angular Apps

Import an Angular Module

```javascript
import {NativeScriptSvgModule} from '@sergeymell/nativescript-svg/angular';

@NgModule({
    [
       ...,
       NativeScriptSvgModule
    ],
    ...
})
export class AppModule {}
```

Use custom element in your views

```html
<SVGImage src="~/images/nativescript.svg" width="256" height="256"></SVGImage>
```

## Additional info

Please, refer some best practices of creating svg files

- https://jwatt.org/svg/authoring/#doctype-declaration
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started

## License

Apache License Version 2.0