https://github.com/warungpintar/rnsvg-generator

generate react-native-svg component from .svg file
https://github.com/warungpintar/rnsvg-generator

generator react-native react-native-svg svg

Last synced: about 4 hours ago
JSON representation

generate react-native-svg component from .svg file

• Host: GitHub
• URL: https://github.com/warungpintar/rnsvg-generator
• Owner: warungpintar
• License: mit
• Created: 2021-07-23T01:27:45.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-08-02T08:29:33.000Z (over 3 years ago)
• Last Synced: 2025-01-04T01:42:19.825Z (8 days ago)
• Topics: generator, react-native, react-native-svg, svg
• Language: TypeScript
• Homepage:
• Size: 2.72 MB
• Stars: 34
• Watchers: 5
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rnsvg-generator

[![npm version](https://badge.fury.io/js/rnsvg-generator.svg)](https://www.npmjs.com/package/rnsvg-generator)

[![build](https://github.com/warungpintar/rnsvg-generator/actions/workflows/ci.yml/badge.svg)](https://github.com/warungpintar/rnsvg-generator/actions/workflows/ci.yml)

convert any svg files into programmable React Component that compatible to `react-native-svg`

## Usage

```bash

npx rnsvg-generator source-path-or-folder -o output-path-or-folder

```

or install it globally

```bash

npm i -g rnsvg-generator

```

## Example

this svg code

```svg

  

  

  

```

will be converted into

```tsx

import React from "react";

import { Linejoin, Linecap, Svg, Path } from "react-native-svg";

export interface BillProps {

  outerFill?: string;

  innerFill?: string;

  outerStroke?: string;

  innerStroke?: string;

  width?: number;

  height?: number;

  strokeWidth?: number;

  strokeLinecap?: Linecap;

  strokeLinejoin?: Linejoin;

}

const Bill: React.FC = (props) => (

  

    

    

    

    

  

);

export default Bill;

```

## License

MIT

![Hi-Five](https://media.giphy.com/media/JhThbOq62vwn6/giphy.gif)