Convert svg icons to React (.tsx) components

convert-svg-to-tsx.tsx

const fs = require("fs-extra");
const path = require("path");
const { transform } = require("@svgr/core");

const srcDir = "./icons"; // Source directory containing SVG files
const destDir = "./components"; // Destination directory for TSX files

const template = (
  { imports, interfaces, componentName, props, jsx },
  { tpl }
) => {
  return tpl`
${imports}
import { cn } from '@/lib/utils';

${interfaces}

export const ${componentName} = ({ className, ...props }: React.ComponentProps<'svg'>) => (
  ${jsx}
);
`;
};

const svgrOptions = {
  typescript: true,
  template,
  plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
  svgoConfig: {
    plugins: [
      {
        name: "preset-default",
        params: {
          overrides: {
            removeViewBox: false,
          },
        },
      },
    ],
  },
  jsx: {
    babelConfig: {
      plugins: [
        [
          "@svgr/babel-plugin-add-jsx-attribute",
          {
            elements: ["svg"],
            attributes: [
              {
                name: "className",
                value: "cn(className)",
                spread: false,
                literal: true,
                position: "end",
              },
            ],
          },
        ],
      ],
    },
  },
};

function toPascalCase(str) {
  return str
    .split("-")
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
    .join("");
}

async function convertSvgToTsx() {
  try {
    await fs.ensureDir(destDir);
    const files = await fs.readdir(srcDir);
    for (const file of files) {
      if (path.extname(file) === ".svg") {
        const svgCode = await fs.readFile(path.join(srcDir, file), "utf8");
        const baseName = path.basename(file, ".svg");
        const componentName = toPascalCase(baseName);
        const tsxCode = await transform(svgCode, svgrOptions, {
          componentName,
        });
        await fs.writeFile(path.join(destDir, `${baseName}.tsx`), tsxCode);
        console.log(
          `Converted ${file} to ${baseName}.tsx (Component: ${componentName})`
        );
      }
    }
    console.log("Conversion completed successfully!");
  } catch (error) {
    console.error("An error occurred:", error);
  }
}

convertSvgToTsx();