generate react-native-svg component from .svg file

Last update: Jun 10, 2022

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

GitHub

https://github.com/warungpintar/rnsvg-generator
You might also like...

react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

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:

Feb 23, 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 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

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

May 26, 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 ])

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

Mar 7, 2022

A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handler.

react-native-image-cropview A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handle

Jun 14, 2022

Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

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

Mar 25, 2022

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

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

May 2, 2022

VideoPlayer for the React Native Video component at react-native-video

VideoPlayer for the React Native Video component at react-native-video

🕹 react-native-media-console VideoPlayer for the React Native Video component at react-native-video. ⭐️ Features This package contains a simple set

Jun 15, 2022
Comments
  • 1. feat(add-get-single-file): update with get single file

    Description

    Add get single file fitur.

    Usecase

    Example in svg directories, we have more file svg, but i want to update a single file svg, with this fitur we can convert a single file svg.

    Screen Shot 2021-07-26 at 13 44 10
    Reviewed by adiatma at 2021-07-26 05:45
React-Native image caching in file system with progressive loading for iOS and Android
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/

Jun 22, 2022
Arc Slider Component for React Native using React Native SVG
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

May 30, 2022
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

Dec 13, 2021
SVG library for React Native, React Native Web, and plain React web projects.
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

Jun 23, 2022
A QR Code generator for React Native based on react-native-svg and node-qrcode.
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

Jun 7, 2022
Android and iOS charts based on react-native-svg and paths-js
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

May 29, 2022
Import SVG files in your React Native project the same way that you would in a Web application.
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

Jun 16, 2022
iOS/Android native vector assets generated from SVG
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

Jun 20, 2022
A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.
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

Jun 24, 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 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

Jun 24, 2022