Add support for multiple outputs (--m or --multi

packages/create-chakra-icons/README.md

@@ -12,6 +12,7 @@
   - `<Icon />` Component, [**See**](https://chakra-ui.com/docs/media-and-icons/icon#using-the-icon-component).
   - `createIcon(...)` Functional, [**See**](https://chakra-ui.com/docs/media-and-icons/icon#using-the-createicon-function).
 - [x] Multiple input with `directories` or `files` as input value for option `-i` or `--input`.
+- [x] Multiple outputs for each input svg.
 - [x] Support case in export name declaration (camel|snake|pascal|constant).
 - [x] Suffix and Prefix for generated code of export name declaration.
 - [x] Support type annotation when code generated is `<Icon />`.
@@ -36,7 +37,7 @@ create-chakra-icons [FLAGS] [OPTIONS] [INPUT]
 ```console
 -i, --input <PATH>      This option for read the input from PATH of FILE or DIRECTORIES.
                         [e.g.: -i some/path , -i file.svg]
--o, --output <PATH>     Writes the output. [default: stdout]
+-o, --output <PATH>     Writes the output or sets output directory. [default: stdout]
 -n, --name <STRING>     Sets value for `displayName` properties
                         (*ONLY for pipelines command). [default: Unamed] [e.g. -n "MyIcon"]
 -C, --case <snake|camel|constant|pascal>
@@ -47,6 +48,8 @@ create-chakra-icons [FLAGS] [OPTIONS] [INPUT]
                         [e.g.: -S "Icon"]
 --ts, --typescript      Sets output as TypeScript code.
 
+--m, --multi             Creates separate output for each input (*ONLY for CLI command).
+
 -T, --type <TYPE>       TYPE:
                         (F|f). Sets output code with function \`createIcon({...})\`.
                         (C|c). Sets output code with Component Icon \`(props) => <Icon> {...} </Icon>\`.
@@ -112,12 +115,19 @@ create-chakra-icons  -o Icons.js ./MyCompany.svg ./social-icons
 
 - **output** will be make in `Icons.js` (argument `-o` or `--output`).
 
+#### Multiple Output
+
+```console
+create-chakra-icons  -o output_dir ./Facebook.svg ./Apple.svg ./Amazon.svg ./Netflix.svg ./Google.svg --m
+```
+
+- **output** will make files for each svg in output_dir (argument `--m` or `--multi`).
+
 ## Roadmap
 
 - [x] TypeScript Support (Type Annotation or Type Definition).
   - Only when code generated is `<Icon />` component [**See**](https://chakra-ui.com/docs/media-and-icons/icon#using-the-icon-component).
 - [ ] ReScript Support.
-- [ ] Per file input is Per file output. ⁉️ 🤔
 - [ ] Feel free for give me any feedback or feature request (create an issue first).
 
 ## Maintainer

packages/create-chakra-icons/examples/README.md

@@ -1,9 +1,11 @@
 ## Usage
 
 ```console
-cat Simple.svg | create-chakra-icons -n "Simple" > Simple.js 
+cat Simple.svg | create-chakra-icons -n "Simple" > Simple.js
 // or with argument -i and -o
 create-chakra-icons -i Simple.svg -o Simple.js
 // or with argument -i <dirs>
 create-chakra-icons -i ../examples -i MyIcons.js
+// multiple outputs -M
+create-chakra-icons -i ../examples -o multiple --m
 ```

packages/create-chakra-icons/examples/multiple/Simple.js

@@ -0,0 +1,6 @@
+import { createIcon } from "@chakra-ui/react";
+export const Simple = createIcon({
+  displayName: "Simple",
+  viewBox: "0 0 200 200",
+  d: "M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
+});

packages/create-chakra-icons/lib/cli.js

@@ -38,34 +38,61 @@ function pipeline(args) {
 }
 
 function main(args) {
-  const { inputs, outputFile, name, exportNameCase, exportNameSuffix, exportNamePrefix, isTypescript, outputType } =
-    getCommonOptions(args);
+  const {
+    inputs,
+    outputFile,
+    name,
+    exportNameCase,
+    exportNameSuffix,
+    exportNamePrefix,
+    isTypescript,
+    outputType,
+    multiFileOutput,
+  } = getCommonOptions(args);
   const version = args.V || args.version;
 
   if (inputs.length > 0) {
     // make code
-    const source = createCode(
-      ...inputs.reduce(
-        stringToInput({
-          displayName: name,
-          exportNameCase,
-          encoding: ENCODING,
-          isTypescript,
-          exportNameSuffix,
-          exportNamePrefix,
-          outputType,
-        }),
-        [],
-      ),
+    const reducedInputs = inputs.reduce(
+      stringToInput({
+        displayName: name,
+        exportNameCase,
+        encoding: ENCODING,
+        isTypescript,
+        exportNameSuffix,
+        exportNamePrefix,
+        outputType,
+      }),
+      [],
     );
-    // write output in output
-    return outputFile
-      ? Fs.writeFile(Path.resolve(outputFile), source, (err) => {
-          if (err) {
-            error.write(err, () => exit(1));
-          }
-        })
-      : output.write(`${source}`);
+    if (multiFileOutput) {
+      // iterate through inputs, generate code and write to file
+      reducedInputs.forEach((fileInput) => {
+        const source = createCode(fileInput);
+        return outputFile
+          ? Fs.writeFile(
+              Path.resolve(outputFile, `${fileInput.displayName}${isTypescript ? ".ts" : ".js"}`),
+              source,
+              (err) => {
+                if (err) {
+                  error.write(err, () => exit(1));
+                }
+              },
+            )
+          : output.write(`${source}`);
+      });
+      return true;
+    } else {
+      const source = createCode(...reducedInputs);
+      // write output in output
+      return outputFile
+        ? Fs.writeFile(Path.resolve(outputFile), source, (err) => {
+            if (err) {
+              error.write(err, () => exit(1));
+            }
+          })
+        : output.write(`${source}`);
+    }
   } else if (version) {
     return output.write(packageVersion);
   }
@@ -84,7 +111,7 @@ FLAGS:
 OPTIONS:
   -i, --input <PATH>      This option for read the input from PATH from FILE or DIRECTORIES.
                           [e.g.: -i some/path , -i file.svg]
-  -o, --output <PATH>     Writes the output. [default: stdout]
+  -o, --output <PATH>     Writes the output or sets output directory. [default: stdout]
   -n, --name <STRING>     Sets value for \`displayName\` properties
                           (*ONLY for pipelines command). [default: Unamed] [e.g. -n "MyIcon"]
   -C, --case <snake|camel|constant|pascal>
@@ -96,6 +123,8 @@ OPTIONS:
 
                           [e.g.: -S "Icon"]
 
+  --m, --multi             Creates separate output for each input.
+
   --ts, --typescript      Sets output as TypeScript code.
 
   -T, --type <TYPE>       TYPE:
@@ -123,6 +152,7 @@ function getCommonOptions(args) {
     exportNameSuffix: args.S || args.suffix || "",
     exportNamePrefix: args.P || args.prefix || "",
     outputType: String(args.T || args.type),
+    multiFileOutput: args.m || args.multi || false,
   };
 }