# react-native-image-to-svg

> it converts image to svg

Latest version **0.0.5** (published 2021-12-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-image-to-svg
pnpm add react-native-image-to-svg
yarn add react-native-image-to-svg
bun add react-native-image-to-svg
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2021-12-09 |
| First published | 2021-12-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | tanmaya |
| Maintainers | tanmaya_pradhan |
| Keywords | reactNativeImageToSVG |

## Links

- npm: https://www.npmjs.com/package/react-native-image-to-svg
- Repository: https://github.com/TanmayaPradhan/react-native-image-to-svg
- Homepage: https://github.com/TanmayaPradhan/react-native-image-to-svg#readme
- Issues: https://github.com/TanmayaPradhan/react-native-image-to-svg/issues
- npm.io page: https://npm.io/package/react-native-image-to-svg

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2021-12-09
- 0.0.4 — 2021-12-08
- 0.0.3 — 2021-12-08
- 0.0.2 — 2021-12-08
- 0.0.1 — 2021-12-08

## README

# react-native-image-to-svg

## Installation

`npm install --save @potrace`
`npm install --save @react-native-svg`
`npm install --save react-native-image-to-svg`


## Features

- It converts image to svg and returns svg path
- svg image animation

<img src="https://user-images.githubusercontent.com/40633712/145273377-e9e8ae04-b292-408b-9f82-c5dc606e7242.gif" width="300" height="600">


### Declarative Usage
```ruby
    import {Image} from 'react-native';
    import {launchImageLibrary} from 'react-native-image-picker';
    import {AnimatedSvgComponent, ConvertImageToSvg} from 'react-native-image-to-svg';
    import logo from '@imgs/logo.png';

    const convertImageToSvg = ConvertImageToSvg(); => it is a custom hook.call it inside the functional component
    const func_convertLocalImgToSVG = async () => {
        try {
        const imageUri = Image.resolveAssetSource(logo).uri;
        const resp = await convertImageToSvg.func_convertImgToSVG(imageUri);
        func_setImageResp(resp);
        } catch (err) {
        console.error(err);
        }
    };

    OR

    const func_openImagePicker = async () => {
        launchImageLibrary(
        {mediaType: 'photo', includeBase64: true},
        async (response) => {
            if (response.didCancel) {
            } else if (response.errorCode) {
            } else {
            const [img] = response?.assets;
            let resp = await convertImageToSvg.func_convertImgToSVG(img.uri);
            func_setImageResp(resp);
            }
        });
    };
    const func_setImageResp = svgResp => {
        setViewBox(svgResp?.viewBox);
        setPath(svgResp?.path);
    };
    <AnimatedSvgComponent
          path={path}
          viewBox={viewBox}
          fillColor={'#000'}
          strokeWidth={5}
          stokeColor="#98D1DA"
          duration={4000}
          backgroundColor="#fff"
          animation={true}
        />
```


### Properties

| Parameter | Type     | Description                       |
| :-------- | :------- | :-------------------------------- |
| `uri`      | `string` | image uri need to pass for the conversion |
| `path`      | `string` | svg path|
| `viewBox`      | `string` | svg viewBox |
| `stokeColor`      | `string` | svg border color |
| `fillColor`      | `string` | svg fill |
| `strokeWidth`      | `integer` | svg width |
| `duration`      | `integer` | animation duration |
| `loop`      | `boolean` | animation loop |
| `backgroundColor`      | `string` | background color |
| `animation`      | `boolean` | animation |

---
_Source: https://npm.io/package/react-native-image-to-svg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._