Import Icons from different folder to React Icon Component

importIconsReactComponent.js

const fs = require('fs');
const readline = require('readline');
const stream = require('stream');

// Folder where all the icons are defined to be used
const inputIconsFile = './src/common/icons.template.js';
const outputIconsFile = './src/common/icons.js';

// Icon packages:
// - id: ID of the package (currently not used)
// - folder: Relative path to the folder containing the icons
// - appendImportsSection: Section where will be replaced the imports of the icons
// - appendIconsSection: Section where will be replaced the icons in the object of all the icons
// - appendPrefixIcons: Prefix for icon name in the IconsSection and for the Imports
// - removeZerosFromName: Remove all the 0 digits from the name
// - absolutePathIconsFolder: Absolute path for the import of the icons inside the React Component
const iconPackages = [
  {
    id: 'ui',
    folder: './src/images/icons/ui',
    appendImportsSection: '$appendImports',
    appendIconsSection: '$appendIcons',
    appendPrefixIcons: '',
    removeZerosFromName: true,
    absolutePathIconsFolder: '@icons/ui/',
  },
  {
    id: 'building-components',
    folder: './src/images/icons/building-components',
    appendImportsSection: '$appendComponentsImports',
    appendIconsSection: '$appendComponentsIcons',
    appendPrefixIcons: 'Icon',
    removeZerosFromName: false,
    absolutePathIconsFolder: '@icons/building-components/',
  },
];

// Read all the locale file lines
// SEE: https://gist.github.com/narciso-dev/b690593f1ebe41de65be25c9be2b7c9c
function readLines(input) {
  const output = new stream.PassThrough({ objectMode: true });
  const rl = readline.createInterface({
    input: fs.createReadStream(input),
  });
  rl.on('line', line => {
    output.write(line);
  });
  rl.on('close', () => {
    output.destroy();
  });
  return output;
}

// Replace dashes and camelcase the string
// SEE: https://stackoverflow.com/a/6009452
function camelCase(string) {
  return string.replace(/_([a-z0-9])/gi, function(all, letter) {
    return letter.toUpperCase();
  });
}

// Get all the files in the folder
function getFilesNames(dir, digits = true) {
  const filesNames = [];
  const filesNamesCamelCase = [];

  const files = fs.readdirSync(dir);
  files.forEach(function(file) {
    filesNames.push(file);
    filesNamesCamelCase.push(
      camelCase(file.split('.')[0])
        .replace(new RegExp(`[\\s${!!digits ? '0' : ''}]`, 'gi'), '')
        .replace('Zeichenfläche', ''),
    );
  });
  return [filesNames, filesNamesCamelCase];
}

// Add line on the passed file
function addLine(outputFileStream, line = '') {
  outputFileStream.write(`${line}\n`);
}

// Main function
(async () => {
  const outputFile = fs.createWriteStream(outputIconsFile);

  for await (const line of readLines(inputIconsFile, outputIconsFile)) {
    addLine(outputFile, line);

    for await (const iconPackage of iconPackages) {
      const [filesNames, filesNamesCamelCase] = await getFilesNames(
        iconPackage.folder,
        iconPackage.removeZerosFromName,
      );

      // 1. Add the import of the icon
      if (!!line.includes(iconPackage.appendImportsSection)) {
        for await (const [index, filename] of filesNames.entries()) {
          addLine(
            outputFile,
            `import { ReactComponent as ${iconPackage.appendPrefixIcons}${filesNamesCamelCase[index]} } from '${iconPackage.absolutePathIconsFolder}${filename}';`,
          );
        }
      }
    }

    for await (const iconPackage of iconPackages) {
      const [, filesNamesCamelCase] = await getFilesNames(
        iconPackage.folder,
        iconPackage.removeZerosFromName,
      );
      // 2. Add the file name in the object with the correlated name
      if (!!line.includes(iconPackage.appendIconsSection)) {
        for await (const filename of filesNamesCamelCase) {
          addLine(outputFile, `  ${filename}: ${iconPackage.appendPrefixIcons}${filename},`);
        }
      }
    }
  }
  console.log('Finished');
})();