From 80e4c9acae539ca6a5b0b2e7ebe11a8ffea0b8c0 Mon Sep 17 00:00:00 2001 From: Matthias Martin Date: Mon, 25 Feb 2019 17:56:44 +0100 Subject: [PATCH 1/8] replace fill with props.fill --- src/replaceAllStrings.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/replaceAllStrings.js b/src/replaceAllStrings.js index a334ed3..107b566 100644 --- a/src/replaceAllStrings.js +++ b/src/replaceAllStrings.js @@ -43,6 +43,7 @@ module.exports = function replaceAll(str) { 'radialGradient>': 'RadialGradient>', 'stop>': 'Stop>', 'clipPath>': 'ClipPath>', + 'fill=".*?"': 'fill={props.fill}' cy: 'y', cx: 'x' }; From 4da9d37f4c90f215979bf9ae12cbfb42ace59f31 Mon Sep 17 00:00:00 2001 From: Matthias Martin Date: Mon, 25 Feb 2019 17:57:40 +0100 Subject: [PATCH 2/8] fix --- src/replaceAllStrings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/replaceAllStrings.js b/src/replaceAllStrings.js index 107b566..34fa1fa 100644 --- a/src/replaceAllStrings.js +++ b/src/replaceAllStrings.js @@ -43,7 +43,7 @@ module.exports = function replaceAll(str) { 'radialGradient>': 'RadialGradient>', 'stop>': 'Stop>', 'clipPath>': 'ClipPath>', - 'fill=".*?"': 'fill={props.fill}' + 'fill=".*?"': 'fill={props.fill}', cy: 'y', cx: 'x' }; From 65f12dbde4cb0ead21f411e15dccf33fc1a6971f Mon Sep 17 00:00:00 2001 From: Matthias Martin Date: Mon, 25 Feb 2019 18:02:22 +0100 Subject: [PATCH 3/8] fix --- index.js | 4 ++++ src/replaceAllStrings.js | 1 - src/replaceFill.js | 3 +++ 3 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 src/replaceFill.js diff --git a/index.js b/index.js index 10abcba..c87e9b1 100755 --- a/index.js +++ b/index.js @@ -21,6 +21,7 @@ const generateComponent = require('./src/generateComponent'); const printErrors = require('./src/output').printErrors; const removeStyle = require('./src/removeStyle'); const replaceAllStrings = require('./src/replaceAllStrings'); +const replaceFill = require('./src/replaceFill'); // Argument setup const args = yargs @@ -132,6 +133,9 @@ const runUtil = (fileToRead, fileToWrite) => { SVGtoJSX(output).then(jsx => { // Convert any html tags to react-native-svg tags jsx = replaceAllStrings(jsx); + + // replace Fill + jsx = replaceFill(jsx); // Wrap it up in a React component jsx = generateComponent(jsx, fileToWrite); diff --git a/src/replaceAllStrings.js b/src/replaceAllStrings.js index 34fa1fa..a334ed3 100644 --- a/src/replaceAllStrings.js +++ b/src/replaceAllStrings.js @@ -43,7 +43,6 @@ module.exports = function replaceAll(str) { 'radialGradient>': 'RadialGradient>', 'stop>': 'Stop>', 'clipPath>': 'ClipPath>', - 'fill=".*?"': 'fill={props.fill}', cy: 'y', cx: 'x' }; diff --git a/src/replaceFill.js b/src/replaceFill.js new file mode 100644 index 0000000..f9e695d --- /dev/null +++ b/src/replaceFill.js @@ -0,0 +1,3 @@ +module.exports = function replaceAll(str) { + return str.replace(/fill=".*?"/gm, 'fill={props.fill}'); +}; From 23b9d9569ba004b438d1227ba78667d26cae4b82 Mon Sep 17 00:00:00 2001 From: Matthias Martin Date: Mon, 25 Feb 2019 18:05:14 +0100 Subject: [PATCH 4/8] color default --- src/replaceFill.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/replaceFill.js b/src/replaceFill.js index f9e695d..6718cf8 100644 --- a/src/replaceFill.js +++ b/src/replaceFill.js @@ -1,3 +1,5 @@ module.exports = function replaceAll(str) { - return str.replace(/fill=".*?"/gm, 'fill={props.fill}'); + return str.replace(/fill=(".*?")/gm, function (a, color) { + return 'fill={props.fill || ' + color + '}'; + }); }; From e70d9608576c545a19f717748188cb0cfb25401c Mon Sep 17 00:00:00 2001 From: Matthias Martin Date: Mon, 25 Feb 2019 20:38:52 +0100 Subject: [PATCH 5/8] stroke prop --- index.js | 14 +++++++++++++- src/replaceFill.js | 4 ++-- src/replaceStroke.js | 5 +++++ 3 files changed, 20 insertions(+), 3 deletions(-) create mode 100644 src/replaceStroke.js diff --git a/index.js b/index.js index c87e9b1..c3b5ec0 100755 --- a/index.js +++ b/index.js @@ -22,12 +22,15 @@ const printErrors = require('./src/output').printErrors; const removeStyle = require('./src/removeStyle'); const replaceAllStrings = require('./src/replaceAllStrings'); const replaceFill = require('./src/replaceFill'); +const replaceStroke = require('./src/replaceStroke'); // Argument setup const args = yargs .option('dir', { alias: 'd', default: false }) .option('format', { default: true }) .option('output', { alias: 'o' }) + .option('fillProp', { default: true }) + .option('strokeProp', { default: true }) .option('rm-style', { default: false }) .option('force', { alias: 'f', default: false }).argv; @@ -36,6 +39,8 @@ const firstArg = args._[0]; const newFileName = args._[1] || 'MyComponent'; const outputPath = args.output; const directoryPath = args.dir; +const fillProp = args.fillProp; +const strokeProp = args.strokeProp; const rmStyle = args.rmStyle; const format = args.format; @@ -135,7 +140,14 @@ const runUtil = (fileToRead, fileToWrite) => { jsx = replaceAllStrings(jsx); // replace Fill - jsx = replaceFill(jsx); + if (fillProp) { + jsx = replaceFill(jsx); + } + + // replace Stroke + if (strokeProp) { + jsx = replaceStroke(jsx); + } // Wrap it up in a React component jsx = generateComponent(jsx, fileToWrite); diff --git a/src/replaceFill.js b/src/replaceFill.js index 6718cf8..53991ec 100644 --- a/src/replaceFill.js +++ b/src/replaceFill.js @@ -1,5 +1,5 @@ -module.exports = function replaceAll(str) { - return str.replace(/fill=(".*?")/gm, function (a, color) { +module.exports = function replaceFill(str) { + return str.replace(/fill=(".*?")/gm, function (match, color) { return 'fill={props.fill || ' + color + '}'; }); }; diff --git a/src/replaceStroke.js b/src/replaceStroke.js new file mode 100644 index 0000000..2cceba2 --- /dev/null +++ b/src/replaceStroke.js @@ -0,0 +1,5 @@ +module.exports = function replaceStroke(str) { + return str.replace(/stroke=(".*?")/gm, function (match, color) { + return 'stroke={props.stroke || ' + color + '}'; + }); +}; From 0e3d5f8fb51f6124d0af2853c2779b130190e990 Mon Sep 17 00:00:00 2001 From: Matthias Martin Date: Mon, 25 Feb 2019 20:51:13 +0100 Subject: [PATCH 6/8] ensure boolean type --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index c3b5ec0..6bc1405 100755 --- a/index.js +++ b/index.js @@ -29,8 +29,8 @@ const args = yargs .option('dir', { alias: 'd', default: false }) .option('format', { default: true }) .option('output', { alias: 'o' }) - .option('fillProp', { default: true }) - .option('strokeProp', { default: true }) + .option('fillProp', { type: 'boolean', default: true }) + .option('strokeProp', { type: 'boolean', default: true }) .option('rm-style', { default: false }) .option('force', { alias: 'f', default: false }).argv; From 8330523a6b5384a8642cb4b46bdca614000c83d1 Mon Sep 17 00:00:00 2001 From: Matthias Martin Date: Mon, 25 Feb 2019 21:41:05 +0100 Subject: [PATCH 7/8] optional width and height prop --- index.js | 8 ++++++++ src/replaceWidthHeight.js | 5 +++++ src/test-svgs/TestSvg.js | 28 ++++++++++++++-------------- 3 files changed, 27 insertions(+), 14 deletions(-) create mode 100644 src/replaceWidthHeight.js diff --git a/index.js b/index.js index 6bc1405..5c467f7 100755 --- a/index.js +++ b/index.js @@ -23,6 +23,7 @@ const removeStyle = require('./src/removeStyle'); const replaceAllStrings = require('./src/replaceAllStrings'); const replaceFill = require('./src/replaceFill'); const replaceStroke = require('./src/replaceStroke'); +const replaceWidthHeight = require('./src/replaceWidthHeight'); // Argument setup const args = yargs @@ -31,6 +32,7 @@ const args = yargs .option('output', { alias: 'o' }) .option('fillProp', { type: 'boolean', default: true }) .option('strokeProp', { type: 'boolean', default: true }) + .option('widthHeightProp', { type: 'boolean', default: true }) .option('rm-style', { default: false }) .option('force', { alias: 'f', default: false }).argv; @@ -41,6 +43,7 @@ const outputPath = args.output; const directoryPath = args.dir; const fillProp = args.fillProp; const strokeProp = args.strokeProp; +const widthHeightProp = args.widthHeightProp; const rmStyle = args.rmStyle; const format = args.format; @@ -148,6 +151,11 @@ const runUtil = (fileToRead, fileToWrite) => { if (strokeProp) { jsx = replaceStroke(jsx); } + + // replace widthHeightProp + if (widthHeightProp) { + jsx = replaceWidthHeight(jsx); + } // Wrap it up in a React component jsx = generateComponent(jsx, fileToWrite); diff --git a/src/replaceWidthHeight.js b/src/replaceWidthHeight.js new file mode 100644 index 0000000..3491b8d --- /dev/null +++ b/src/replaceWidthHeight.js @@ -0,0 +1,5 @@ +module.exports = function replaceFill(str) { + return str.replace(/(width|height)=(".*?")/gm, function (match, key, value) { + return `${key}={props.${key} || ${value}}`; + }); +}; diff --git a/src/test-svgs/TestSvg.js b/src/test-svgs/TestSvg.js index b583afb..a4fa0d0 100644 --- a/src/test-svgs/TestSvg.js +++ b/src/test-svgs/TestSvg.js @@ -21,23 +21,23 @@ import { export default function TestSvg(props) { return ( - + - - - - + + + + - - - + + + - - - - - - + + + + + + ); From 1f8cc048a63d1f36cdafe8c391aae8cdf5f47e8d Mon Sep 17 00:00:00 2001 From: Matthias Martin Date: Fri, 21 Feb 2020 13:08:21 +0100 Subject: [PATCH 8/8] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index ff27f97..a657cc7 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +Forked from chrisbull/svg-to-react-native-cli and added options to override width, height, fill and stroke of the compiled SVG. + # svg-to-react-native-cli Based on svg-to-react-cli. A command line utility that takes a svg image file and outputs a fully formatted stateless functional React Native component with `height` and `width` for props. With flags to toggle formatting and remove style attributes.