Convert any svg files into programmable React Component
rnsvg-generator
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
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;