react-native-prepare-svg
Tool to transform svg
files and 'strings' into a flat JSON
list.
Generate valid data for react-native-svgx.
Useful to manipulate
SVG
withExpo
orreact-native-svg
Components.
Features
- Convert svg files to json, remove all unnecessary values.
- Group all svg files into a common lib file.
- Optimize output with svgo.
- Returns a json output friendly to be consumed by the React Native components provided by Expo.io or react-native-svg.
- It was designed to generate the data required by the react-native-svgx component.
How to use
npm install -g react-native-prepare-svg
react-native-prepare-svg [options]
Options
-h, --help output usage information -V, --version output the version number -i, --input [input] Specifies input folder or file. Default current folder -o, --output [output] Specifies output file. Default ./svgson.json -p, --pretty Prettyfied JSON
Use via CLI
-
input
current folder width defaultoutput
svgLib.json file$ rn-prepare-svg
-
input
/svgs folder withoutput
my-svgs.json file$ rn-prepare-svg --input svgs --output my-svgs.json
-
input
myfile.svg file |output
my-file.json file$ rn-prepare-svg -i myfile.svg -o my-file.json
-
Complex example
input
/svgs folderoutput
mySvgLib.json file- prettifies JSON output
$ rn-prepare-svg -i ./svgs -o ./mySvgLib.json --pretty
Use as npm script with local dependency
# save in dependencies npm i -D react-native-prepare-svg
add the npm scripts:
... "scripts": ,...
Use as Node Module
# save in devDependencies npm i -D react-native-prepare-svg
const rnPrepareSvg = ; // From .svg fileconst fs = ; fs; // From svg Stringconst SVG = '<svg width="300" height="300"><circle r="20" stroke-linecap="round" /></svg>';;
Response example:
rn-prepare-svg -i ./checkmark-icon.svg -o ./mySvgLib.json --pretty
// mySvgLib.json
Tests
make test # or npm test
License
MIT © Jose Antonio Sanchez