icons.mjs

import { transform } from '@svgr/core';
import chokidar from 'chokidar';
import _ from 'lodash';
import fs from 'node:fs';
import path from 'node:path';

const iconsDir = './src/assets/icons';
const reactIconsDir = './src/assets/react-icons';

// Ensure the react-icons directory exists
if (!fs.existsSync(reactIconsDir)) {
  fs.mkdirSync(reactIconsDir, { recursive: true });
}

// Function to convert SVG to React component
const convertSvgToReact = async (filePath) => {
  const fileName = path.basename(filePath, '.svg');
  const componentName = _.upperFirst(_.camelCase(fileName));
  const outputFilePath = path.join(reactIconsDir, `${componentName}.tsx`);

  const svgCode = fs.readFileSync(filePath, 'utf8');
  try {
    const jsCode = await transform(
      svgCode,
      {
        icon: true,
        typescript: true,
        plugins: [
          '@svgr/plugin-svgo',
          '@svgr/plugin-jsx',
          // '@svgr/plugin-prettier',
        ],
        svgoConfig: {
          plugins: [
            {
              name: 'removeAttrs',
              params: {
                attrs: '(fill)',
              },
            },
          ],
        },
        svgProps: {
          fill: 'currentColor',
        },
      },
      { componentName },
    );
    fs.writeFileSync(outputFilePath, jsCode);
    // eslint-disable-next-line no-console
    console.log(`Converted ${filePath} to ${outputFilePath}`);
  } catch (error) {
    console.error(`Error converting ${filePath}:`, error);
  }
};

// Watch for changes in the icons directory
chokidar
  .watch(iconsDir)
  .on('add', convertSvgToReact)
  // .on('unlink', convertSvgToReact)
  .on('change', convertSvgToReact);