feat(cli): allow multiple values in "--svg-props" and "--replace-attr-values"

Closes #233

Author: gregberge

packages/cli/src/__snapshots__/index.test.js.snap

@@ -346,12 +346,12 @@ export default SvgFile
 "
 `;
 
-exports[`cli should support various args: --svg-props "hidden={true}" 1`] = `
+exports[`cli should support various args: --svg-props "hidden={true},id=hello" 1`] = `
 "import React from 'react'
 
 function SvgFile(props) {
   return (
-    <svg width={48} height={1} hidden={true} {...props}>
+    <svg width={48} height={1} hidden={true} id=\\"hello\\" {...props}>
       <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
     </svg>
   )
@@ -382,20 +382,20 @@ export default SvgFile
 exports[`cli should suppress output when transforming a directory with a --silent option 1`] = `""`;
 
 exports[`cli should transform a whole directory and output relative destination paths 1`] = `
-"[37m[39m
-[37m[39m[37m__fixtures__/cased/camelCase.svg -> __fixtures_build__/whole/cased/CamelCase.js[39m
-[37m[39m[37m__fixtures__/cased/kebab-case.svg -> __fixtures_build__/whole/cased/KebabCase.js[39m
-[37m[39m[37m__fixtures__/cased/multiple---dashes.svg -> __fixtures_build__/whole/cased/MultipleDashes.js[39m
-[37m[39m[37m__fixtures__/complex/skype.svg -> __fixtures_build__/whole/complex/Skype.js[39m
-[37m[39m[37m__fixtures__/complex/telegram.svg -> __fixtures_build__/whole/complex/Telegram.js[39m
-[37m[39m[37m__fixtures__/nesting/a/c/three.svg -> __fixtures_build__/whole/nesting/a/c/Three.js[39m
-[37m[39m[37m__fixtures__/nesting/a/two.svg -> __fixtures_build__/whole/nesting/a/Two.js[39m
-[37m[39m[37m__fixtures__/nesting/one.svg -> __fixtures_build__/whole/nesting/One.js[39m
-[37m[39m[37m__fixtures__/simple/file.svg -> __fixtures_build__/whole/simple/File.js[39m
-[37m[39m[37m__fixtures__/withPrettierRc/file.svg -> __fixtures_build__/whole/withPrettierRc/File.js[39m
-[37m[39m[37m__fixtures__/withSvgoYml/file.svg -> __fixtures_build__/whole/withSvgoYml/File.js[39m
-[37m[39m[37m__fixtures__/withSvgrRc/file.svg -> __fixtures_build__/whole/withSvgrRc/File.js[39m
-[37m__fixtures__/cased/PascalCase.svg -> __fixtures_build__/whole/cased/PascalCase.js[39m"
+"
+__fixtures__/cased/PascalCase.svg -> __fixtures_build__/whole/cased/PascalCase.js
+__fixtures__/cased/camelCase.svg -> __fixtures_build__/whole/cased/CamelCase.js
+__fixtures__/cased/kebab-case.svg -> __fixtures_build__/whole/cased/KebabCase.js
+__fixtures__/cased/multiple---dashes.svg -> __fixtures_build__/whole/cased/MultipleDashes.js
+__fixtures__/complex/skype.svg -> __fixtures_build__/whole/complex/Skype.js
+__fixtures__/complex/telegram.svg -> __fixtures_build__/whole/complex/Telegram.js
+__fixtures__/nesting/a/c/three.svg -> __fixtures_build__/whole/nesting/a/c/Three.js
+__fixtures__/nesting/a/two.svg -> __fixtures_build__/whole/nesting/a/Two.js
+__fixtures__/nesting/one.svg -> __fixtures_build__/whole/nesting/One.js
+__fixtures__/simple/file.svg -> __fixtures_build__/whole/simple/File.js
+__fixtures__/withPrettierRc/file.svg -> __fixtures_build__/whole/withPrettierRc/File.js
+__fixtures__/withSvgoYml/file.svg -> __fixtures_build__/whole/withSvgoYml/File.js
+__fixtures__/withSvgrRc/file.svg -> __fixtures_build__/whole/withSvgrRc/File.js"
 `;
 
 exports[`cli should work with a simple file 1`] = `

packages/cli/src/index.js

@@ -8,12 +8,17 @@ import fileCommand from './fileCommand'
 import dirCommand from './dirCommand'
 import { stat, exitError } from './util'
 
-const parseObject = (arg, accumulation = {}) => {
+function parseObject(arg, accumulation = {}) {
   const [name, value] = arg.split('=')
   return { ...accumulation, [name]: value }
 }
 
-const isFile = filePath => {
+function parseObjectList(arg, accumulation = {}) {
+  const args = arg.split(',').map(str => str.trim())
+  return args.reduce((acc, arg) => parseObject(arg, acc), accumulation)
+}
+
+function isFile(filePath) {
   try {
     const stats = fs.statSync(filePath)
     return stats.isFile()
@@ -61,12 +66,12 @@ program
   .option(
     '--svg-props <property=value>',
     'add props to the svg element',
-    parseObject,
+    parseObjectList,
   )
   .option(
     '--replace-attr-values <old=new>',
     'replace an attribute value',
-    parseObject,
+    parseObjectList,
   )
   .option('--template <file>', 'specify a custom template to use')
   .option('--title-prop', 'create a title element linked with props')

packages/cli/src/index.test.js

@@ -107,7 +107,7 @@ describe('cli', () => {
     ['--native --ref'],
     ['--ref'],
     ['--replace-attr-values "#063855=currentColor"'],
-    [`--svg-props "hidden={true}"`],
+    [`--svg-props "hidden={true},id=hello"`],
     ['--no-svgo'],
     ['--no-prettier'],
     ['--title-prop'],

packages/core/src/__snapshots__/config.test.js.snap

@@ -6,6 +6,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": true,
+  "memo": false,
   "native": false,
   "noSemi": true,
   "plugins": null,
@@ -33,6 +34,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": true,
+  "memo": false,
   "native": false,
   "noSemi": true,
   "plugins": null,
@@ -61,6 +63,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": false,
+  "memo": false,
   "native": false,
   "plugins": null,
   "prettier": true,
@@ -82,6 +85,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": true,
+  "memo": false,
   "native": false,
   "noSemi": true,
   "plugins": null,
@@ -109,6 +113,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": true,
+  "memo": false,
   "native": false,
   "noSemi": true,
   "plugins": null,
@@ -136,6 +141,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": true,
+  "memo": false,
   "native": false,
   "noSemi": true,
   "plugins": null,
@@ -164,6 +170,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": false,
+  "memo": false,
   "native": false,
   "plugins": null,
   "prettier": true,
@@ -185,6 +192,7 @@ Object {
   "expandProps": "end",
   "h2xConfig": null,
   "icon": true,
+  "memo": false,
   "native": false,
   "noSemi": true,
   "plugins": null,

website/src/pages/docs/cli.mdx

@@ -64,6 +64,8 @@ To create icons, two options are important:
 $ npx @svgr/cli --icon --replace-attr-values "#000=currentColor" my-icon.svg
 ```
 
+> You can replace several values using `,` as separator: `--replace-attr-values "#000=currentColor,#fff=currentColor"`
+
 ## Target React Native
 
 It is possible to target React Native using [react-native-svg](https://github.com/react-native-community/react-native-svg).