Add flag to clean SVG icons in generate function

Author: Oleksandr Ratushnyi

README.md

@@ -13,13 +13,14 @@ npm install @onlyredcats/svg-to-react
 ## Usage
 Use the following command to generate React icons from SVG files:
 ```bash
-svg-to-react --output="./src/components/Icon/" --input="./src/assets/"
+svg-to-react --input="./src/assets/" --output="./src/components/Icon/"
 ```
 
 In this command:
 
-- `--output` specifies the path to the output directory where the generated React icon files will be saved.
 - `--input` specifies the path to the directory where the SVG files are located.
+- `--output` specifies the path to the output directory where the generated React icon files will be saved.
+- `--clean` flag is optional and specifies whether to clean width, height and fill attributes from the SVG files in input directory. By default, it is set to `false`.
 
 ## Example
 Let's assume you have the following directory structure:
@@ -38,7 +39,7 @@ my-project/
 
 To generate React icons from SVG files in the `src/assets` directory and save them in `src/components/common/Icon`, you can run the mentioned command
 ```bash
-svg-to-react --output="./src/components/Icon/" --input="./src/assets/"
+svg-to-react --input="./src/assets/" --output="./src/components/Icon/" --clean
 ```
 
 After running CLI command, the `src/components/common/Icon` directory will contain generated React icon files based on the SVG files.

generator.js

@@ -58,6 +58,7 @@ export * from './types';
  * @param {string} inputDir - The directory where the svg iocns located.
  */
 function cleanAllIcons(inputDir) {
+  console.log(`🧹 Cleaning SVG icons: ${inputDir}`);
   fs.readdir(inputDir, (err, files) => {
     files.forEach((file) => {
       if (file.endsWith('.svg')) {
@@ -214,8 +215,9 @@ function createIconsFile(inputDir, outputDir, filename = 'icons.ts') {
  *
  * @param {string} inputDir - The input directory containing SVG files.
  * @param {string} outputDir - The output directory where the generated files will be saved.
+ * @param {boolean} cleanSvg - A flag to remove unnecessary attributes from SVG files.
  */
-function generate(inputDir, outputDir) {
+function generate(inputDir, outputDir, cleanSvg) {
   // Step 1: Create folders if they do not exist
   createFoldersIfNotExist(inputDir, outputDir);
 
@@ -229,7 +231,9 @@ function generate(inputDir, outputDir) {
   createIconsFile(inputDir, outputDir);
 
   // Step 5: Clean all the svg files in the output directory
-  cleanAllIcons(inputDir);
+  if (cleanSvg) {
+    cleanAllIcons(inputDir);
+  }
 }
 
 module.exports = generate;

main.js

@@ -3,24 +3,36 @@
 const yargs = require('yargs');
 const generate = require('./generator.js');
 
+const argTypes = {
+  OUTPUT: 'output',
+  INPUT: 'input',
+  CLEAN: 'clean',
+};
+
 const argv = yargs
-  .usage('Usage: $0 --output <outputDir> --input <inputDir>')
-  .option('output', {
-    describe: 'Output directory for generated React icon files',
+  .usage(
+    `Usage: $0 --${argTypes.INPUT} <inputDir> --${argTypes.OUTPUT} <outputDir> --${argTypes.CLEAN}`,
+  )
+  .option(argTypes.INPUT, {
+    describe: 'Input directory containing SVG files',
     demandOption: true,
     type: 'string',
   })
-  .option('input', {
-    describe: 'Input directory containing SVG files',
+  .option(argTypes.OUTPUT, {
+    describe: 'Output directory for generated React icon files',
     demandOption: true,
     type: 'string',
+  })
+  .option(argTypes.CLEAN, {
+    describe: 'Remove unnecessary attributes from SVG files',
+    type: 'boolean',
   }).argv;
 
 function checkSlash(dir) {
   return dir.endsWith('/') ? dir : `${dir}/`;
 }
 
-const outputDir = checkSlash(argv.output);
-const inputDir = checkSlash(argv.input);
+argv[argTypes.INPUT] = checkSlash(argv[argTypes.INPUT]);
+argv[argTypes.OUTPUT] = checkSlash(argv[argTypes.OUTPUT]);
 
-generate(inputDir, outputDir);
+generate(argv[argTypes.INPUT], argv[argTypes.OUTPUT], argv[argTypes.CLEAN]);