generateReactComponent.js

const svgr = require('@svgr/core').default;
const fs = require('fs-extra');
const glob = require('glob');
const path = require('path');
const camelCase = require('camelcase');

const SOURCE_DIR = './src/svg';
const DIST_DIR = './dist/components';

function consoleInfo() {
  let total = 0,
    legacy = 0;
  const files = glob.sync(`${SOURCE_DIR}/*`);
  const filesInfo = files.map((svgPath) => {
    const totalNums = glob.sync(`${svgPath}/*.svg`).length;
    const category = path.relative(SOURCE_DIR, svgPath);
    if (category === 'legacy') {
      legacy = totalNums;
    }
    total += totalNums;
    return {
      path: svgPath,
      category: camelCase(category, {
        pascalCase: true,
      }),
      total: glob.sync(`${svgPath}/*`).length,
    };
  });
  console.log('------ Detail info: ------');
  console.log(`Total:${total}, current:${total - legacy}, legacy:${legacy}`);
  filesInfo.forEach(({ category, total }) => {
    console.log(`${category}: ${total}`);
  });
  console.log('-------------------------');
}

module.exports = function generateComponents() {
  fs.mkdirpSync(DIST_DIR);

  const files = glob.sync(`${SOURCE_DIR}/**/*.svg`);

  files.forEach(function generateComponent(svgPath, index) {
    let basename = path.basename(svgPath);
    const category = path.relative(SOURCE_DIR, path.dirname(svgPath));
    const componentName = camelCase(
      path.basename(
        category === 'legacy' ? basename.replace(/u\w+-/, '') : basename,
        path.extname(basename)
      ),
      {
        pascalCase: true,
      }
    );
    const svgCode = fs.readFileSync(svgPath, 'utf8');
    console.log(`(${index + 1}/${files.length}) Generating ${componentName}.tsx ...`);
    const jsCode = svgr.sync(
      svgCode,
      {
        plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx', '@svgr/plugin-prettier'],
        typescript: true,
        prettier: true,
        svgo: true,
        ref: true,
        expandProps: 'end',
        svgProps: {
          width: '1em',
          height: '1em',
          fill: 'currentColor',
        },
      },
      { componentName }
    );
    fs.outputFileSync(
      path.join(DIST_DIR, category, `${componentName}.tsx`),
      `// Generated by script, don't edit it please.
${jsCode}`
    );
  });
  consoleInfo();
};