generate react-native-svg component from .svg file

Overview

rnsvg-generator

npm version build

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

Usage

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

or install it globally

npm i -g rnsvg-generator

Example

this svg code

">
<svg height="100" width="100">
  <circle class="circle" cx="50" cy="50" r="50" stroke-width="1" fill="#86bc25" fill-opacity="0.4" />
  <circle class="circle" cx="50" cy="50" r="35" stroke-width="1" fill="black" />
  <circle class="circle" cx="50" cy="50" r="34" stroke-width="2" fill="#86bc25" />
svg>

will be converted into

= (props) => ( ); export default Bill; ">
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<BillProps> = (props) => (
  <Svg
    width={props.width ?? 48}
    height={props.height ?? 48}
    viewBox="0 0 48 48"
    fill="none"
  >
    <Path
      d="M10 6C10 4.89543 10.8954 4 12 4H36C37.1046 4 38 4.89543 38 6V44L31 39L24 44L17 39L10 44V6Z"
      fill={props.outerFill ?? "#2F88FF"}
      stroke={props.outerStroke ?? "black"}
      strokeWidth={props.strokeWidth ?? 4}
      strokeLinecap={props.strokeLinecap ?? "round"}
      strokeLinejoin={props.strokeLinejoin ?? "round"}
    />
    <Path
      d="M18 22L30 22"
      stroke={props.innerStroke ?? "white"}
      strokeWidth={props.strokeWidth ?? 4}
      strokeLinecap={props.strokeLinecap ?? "round"}
      strokeLinejoin={props.strokeLinejoin ?? "round"}
    />
    <Path
      d="M18 30L30 30"
      stroke={props.innerStroke ?? "white"}
      strokeWidth={props.strokeWidth ?? 4}
      strokeLinecap={props.strokeLinecap ?? "round"}
      strokeLinejoin={props.strokeLinejoin ?? "round"}
    />
    <Path
      d="M18 14L30 14"
      stroke={props.innerStroke ?? "white"}
      strokeWidth={props.strokeWidth ?? 4}
      strokeLinecap={props.strokeLinecap ?? "round"}
      strokeLinejoin={props.strokeLinejoin ?? "round"}
    />
  </Svg>
);

export default Bill;

License

MIT

Hi-Five

Issues
Owner
Warung Pintar
Warung Pintar
React-Native image caching in file system with progressive loading for iOS and Android

React Native Image Cache on File System with Progressive Loading Inspired by: wcandillon/react-native-expo-image-cache (William Candillon) WrathChaos/

null 113 Dec 30, 2021
A wrapper of dotparser to parse GraphViz dot file and collect nodes / edges

reagram React component to render customizable graph/diagram. There are many great ways in JavaScript to create graphs/diagrams, like mermaid, JointJS

null 0 Dec 13, 2021
Arc Slider Component for React Native using React Native SVG

React Native Arc Slider ?? Getting Started Install Install the library and react-native-svg npm i --save rn-arc-slider react-native-svg Link native co

Arpit Bhalla 16 Jan 4, 2022
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 5.9k Jan 22, 2022
A QR Code generator for React Native based on react-native-svg and node-qrcode.

react-native-qrcode-svg A QR Code generator for React Native based on react-native-svg and javascript-qrcode. Discussion: https://discord.gg/RvFM97v F

JerryShen 803 Jan 14, 2022
Android and iOS charts based on react-native-svg and paths-js

** Capital One built this project to help our engineers as well as users in the react native community. We have decided to focus on alternatives to re

Capital One 885 Dec 28, 2021
Import SVG files in your React Native project the same way that you would in a Web application.

react-native-svg-transformer React Native SVG transformer allows you to import SVG files in your React Native project the same way that you would in a

Krister Kari 809 Jan 19, 2022
iOS/Android native vector assets generated from SVG

React Native Vector Image iOS/Android native vector assets generated from SVG. Faster render – ~5x faster than react-native-svg. Smaller JS bundle = f

Joel Arvidsson 163 Jan 17, 2022
A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.

Eva Icons Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally, Eva Icons supports 4

Akveo 8.1k Jan 18, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

FuYaoDe 3.2k Jan 17, 2022
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

Sunny Luo 85 Aug 30, 2021
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Shinix 61 Nov 13, 2021
React Native Higher Order Component that adds advanced caching functionality to the react native Image component.

React Native Image Cache HOC React Native Higher Order Component that adds advanced caching functionality to the react native Image component. Feature

Reid Mayo 277 Jan 2, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 117 Aug 30, 2021
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 410 Dec 23, 2021
react-native-page-swiper ★83 - Page Swiper component for React Native.

react-native-page-swiper Page Swiper component for React Native. Getting Started Installation Basic Usage Properties Examples Development Installation

Fixt 90 Oct 7, 2021
react-native-photo-grid ★31 - React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row.

react-native-photo-grid React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row Ins

Christopher 33 Mar 11, 2021
iOS and Android native search component for react native

react-native-search-bar iOS native search bar for react native. Installation In your react native project, run npm install react-native-search-bar --s

null 17 May 19, 2021
🔽 A Picker component for React Native which emulates the native select> interfaces for iOS and Android

react-native-picker-select A Picker component for React Native which emulates the native <select> interfaces for iOS and Android For iOS, by default w

LawnStarter Organization 1.4k Jan 13, 2022