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. diff --git a/index.js b/index.js index 10abcba..5c467f7 100755 --- a/index.js +++ b/index.js @@ -21,12 +21,18 @@ 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'); +const replaceStroke = require('./src/replaceStroke'); +const replaceWidthHeight = require('./src/replaceWidthHeight'); // Argument setup const args = yargs .option('dir', { alias: 'd', default: false }) .option('format', { default: true }) .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; @@ -35,6 +41,9 @@ 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 widthHeightProp = args.widthHeightProp; const rmStyle = args.rmStyle; const format = args.format; @@ -132,6 +141,21 @@ const runUtil = (fileToRead, fileToWrite) => { SVGtoJSX(output).then(jsx => { // Convert any html tags to react-native-svg tags jsx = replaceAllStrings(jsx); + + // replace Fill + if (fillProp) { + jsx = replaceFill(jsx); + } + + // replace Stroke + 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/replaceFill.js b/src/replaceFill.js new file mode 100644 index 0000000..53991ec --- /dev/null +++ b/src/replaceFill.js @@ -0,0 +1,5 @@ +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 + '}'; + }); +}; 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 ( - + - - - - + + + + - - - + + + - - - - - - + + + + + + );