0.0.3 • Published 5 years ago
svg-to-exporeact v0.0.3
SVG-to-ExpoReact
SVG-to-ExpoReact is a small CLI-Tool that convert SVG files into valid Expo-JSX.
This tool generate full valid *.js
file of your vector graphic.
Here a small Example
If you have a svg-file that looks like following:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 200 200"
width="200"
height="200"
>
<defs>
<radialGradient id="grad" cx="50%" cy="50%" fx="50%" fy="50%">
<stop
id="gradStopMid"
offset="0%"
stop-color="#00f"
stop-opacity="1"
/>
<stop
id="gradStopOut"
offset="100%"
stop-color="#004"
stop-opacity="1"
/>
</radialGradient>
<clipPath id="textBackground1">
<circle
cx="100"
cy="100"
r="100"
/>
</clipPath>
<mask id="maskTest">
<g>
<circle
r="100"
cy="100"
cx="100"
fill="#FFFFFF"
/>
<text
font-size="45"
font-family="sans-serif"
text-anchor="middle"
x="100"
y="115"
fill="#000000"
id="exampleText1"
>
Example
</text>
</g>
</mask>
</defs>
<rect
id="rectTestID"
width="200"
height="200"
y="0"
x="0"
fill="url(#grad)"
mask="url(#maskTest)"
/>
</svg>
And you use svg-to-exporeact
(or type: svgToExpo
)
Then you can modify the out going component name and convert the file to:
GivenComponentName.js
/** this component was created with svg-to-exporeact by KX1095. **/
import React from 'react';
import PropTypes from 'prop-types';
import {Svg} from 'expo';
const { Defs, RadialGradient, Stop, ClipPath, Circle, Mask, G, Text, Rect,} = Svg;
const GivenComponentName = (props) => {
return (
<Svg
preserveAspectRatio={"xMidYMid meet"}
viewBox={"0 0 200 200"}
width={"200"}
height={"200"}
>
<Defs >
<RadialGradient
id={"grad"}
cx={props.grad_cx !== undefined ? props.grad_cx : "50%"}
cy={props.grad_cy !== undefined ? props.grad_cy : "50%"}
fx={props.grad_fx !== undefined ? props.grad_fx : "50%"}
fy={props.grad_fy !== undefined ? props.grad_fy : "50%"}
>
<Stop
id={"gradStopMid"}
offset={props.gradStopMid_offset !== undefined ? props.gradStopMid_offset : "0%"}
stopColor={props.gradStopMid_stopColor !== undefined ? props.gradStopMid_stopColor : "#00f"}
stopOpacity={"1"}
/>
<Stop
id={"gradStopOut"}
offset={props.gradStopOut_offset !== undefined ? props.gradStopOut_offset : "100%"}
stopColor={props.gradStopOut_stopColor !== undefined ? props.gradStopOut_stopColor : "#004"}
stopOpacity={"1"}
/>
</RadialGradient>
<ClipPath
id={"textBackground1"}
>
<Circle
cx={"100"}
cy={"100"}
r={"100"}
/>
</ClipPath>
<Mask
id={"maskTest"}
width={props.maskTest_width !== undefined ? props.maskTest_width : '100%'}
height={props.maskTest_height !== undefined ? props.maskTest_height : '100%'}
x={props.maskTest_x !== undefined ? props.maskTest_x : 0}
y={props.maskTest_y !== undefined ? props.maskTest_y : 0}
>
<G >
<Circle
r={"100"}
cy={"100"}
cx={"100"}
fill={"#FFFFFF"}
/>
<Text
fontSize={"45"}
fontFamily={"sans-serif"}
textAnchor={"middle"}
x={props.exampleText1_x !== undefined ? props.exampleText1_x : "100"}
y={props.exampleText1_y !== undefined ? props.exampleText1_y : "115"}
fill={props.exampleText1_fill !== undefined ? props.exampleText1_fill : "#000000"}
id={"exampleText1"}
>
Example
</Text>
</G>
</Mask>
</Defs>
<Rect
id={"rectTestID"}
width={props.rectTestID_width !== undefined ? props.rectTestID_width : "200"}
height={props.rectTestID_height !== undefined ? props.rectTestID_height : "200"}
y={props.rectTestID_y !== undefined ? props.rectTestID_y : "0"}
x={props.rectTestID_x !== undefined ? props.rectTestID_x : "0"}
fill={props.rectTestID_fill !== undefined ? props.rectTestID_fill : "url(#grad)"}
mask={"url(#maskTest)"}
/>
</Svg>
);
};
GivenComponentName.propTypes = {
grad_cx: PropTypes.string,
grad_cy: PropTypes.string,
grad_fx: PropTypes.string,
grad_fy: PropTypes.string,
gradStopMid_offset: PropTypes.string,
gradStopMid_stopColor: PropTypes.string,
gradStopOut_offset: PropTypes.string,
gradStopOut_stopColor: PropTypes.string,
maskTest_width: PropTypes.string,
maskTest_height: PropTypes.string,
maskTest_x: PropTypes.string,
maskTest_y: PropTypes.string,
exampleText1_x: PropTypes.string,
exampleText1_y: PropTypes.string,
exampleText1_fill: PropTypes.string,
rectTestID_width: PropTypes.string,
rectTestID_height: PropTypes.string,
rectTestID_y: PropTypes.string,
rectTestID_x: PropTypes.string,
rectTestID_fill: PropTypes.string
};
GivenComponentName.defaultProps = {
grad_cx: "50%",
grad_cy: "50%",
grad_fx: "50%",
grad_fy: "50%",
gradStopMid_offset: "0%",
gradStopMid_stopColor: "#00f",
gradStopOut_offset: "100%",
gradStopOut_stopColor: "#004",
maskTest_width: "100%",
maskTest_height: "100%",
maskTest_x: 0,
maskTest_y: 0,
exampleText1_x: 100,
exampleText1_y: 115,
exampleText1_fill: "#000000",
rectTestID_width: 200,
rectTestID_height: 200,
rectTestID_y: 0,
rectTestID_x: 0,
rectTestID_fill: "url(#grad)"
};
export default GivenComponentName;
Installation of svg-to-expo
Make sure you are installed Node.js and npm
is added to your PATH.
Then open your terminal and type the following:
npm i -g svg-to-exporeact
OR:
npm install -g svg-to-exporeact
You can also install it to actual project with:
npm i --save svg-to-exporeact