via-icons/scripts/generateIcons.js

import fs from "fs";
import path from "path";
import { optimize } from "svgo";
import { fileURLToPath } from "url";
import { dirname } from "path";
import outlineConfig from "./svgo.24.outline.js";
import solidConfig from "./svgo.24.solid.js";
import deprecatedIcons from "./deprecated.json" assert { type: "json" };

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const iconMetadataPath = path.resolve(__dirname, "./iconMetadata.json");
const iconMetadata = JSON.parse(fs.readFileSync(iconMetadataPath, "utf-8"));

const mapSvgAttributes = (svgContent) => {
  return svgContent
    .replace(/fill-rule/g, "fillRule")
    .replace(/clip-rule/g, "clipRule");
};

const generateIconComponent = (
  name,
  svgContent,
  description = "",
  usage = [],
  isDeprecated = false
) => `
import * as React from 'react';

interface IconProps extends React.SVGAttributes<SVGElement> {
  children?: never;
  color?: string;
}

/**
 * @name ${name}Icon
 *
 * @category ${usage.length ? "solid" : "outline"}
 *
 * @description
 * ${description}
 *
 * ${isDeprecated ? "@deprecated\n * " : ""}
 * @usage
 * ${usage.map((item) => `- ${item}`).join("\n * ")}
 *
 * @accessibility
 * Asegurarse de incluir un atributo \`aria-label\` o \`aria-hidden="true"\` si el ícono es decorativo.
 *
 * @returns {JSX.Element} Componente SVG.
 */
export const ${name}Icon = React.forwardRef<SVGSVGElement, IconProps>(
  ({ color = 'currentColor', ...props }, forwardedRef) => {
    return (
      ${mapSvgAttributes(svgContent).replace(
        "<svg",
        "<svg {...props} ref={forwardedRef}"
      )}
    );
  }
);

${name}Icon.displayName = '${name}Icon';
`;

const generateIndexFile = (components, iconType) => {
  const exports = components
    .map((name) => `export { ${name}Icon } from './${name}Icon';`)
    .join("\n");
  const indexPath = path.resolve(__dirname, `../src/${iconType}/index.ts`);
  fs.writeFileSync(indexPath, exports, "utf-8");
};

const processIcons = async (iconType) => {
  const svgDir = path.resolve(__dirname, `../src/svgs/${iconType}`);
  const componentDir = path.resolve(__dirname, `../src/${iconType}`);

  if (!fs.existsSync(componentDir)) {
    fs.mkdirSync(componentDir, { recursive: true });
  }

  const components = [];
  const files = fs.readdirSync(svgDir);

  for (const file of files) {
    const filePath = path.resolve(svgDir, file);
    const svgContent = fs.readFileSync(filePath, "utf-8");

    const svgoConfig = iconType === "outline" ? outlineConfig : solidConfig;
    const { data } = await optimize(svgContent, svgoConfig);

    const componentName = file
      .replace(".svg", "")
      .replace(/(^\w|-\w)/g, clearAndUpper);
    const metadata = iconMetadata[componentName];
    const isDeprecated = deprecatedIcons.includes(componentName);

    if (!metadata) {
      console.warn(
        `Metadata for ${componentName} not found, generating without metadata.`
      );
    }

    components.push(componentName);
    const componentContent = generateIconComponent(
      componentName,
      data,
      metadata ? metadata.description : "",
      metadata ? metadata.usage : [],
      isDeprecated
    );

    const componentPath = path.resolve(
      componentDir,
      `${componentName}Icon.tsx`
    );
    fs.writeFileSync(componentPath, componentContent, "utf-8");
  }

  generateIndexFile(components, iconType);
};

const clearAndUpper = (text) => text.replace(/-/, "").toUpperCase();

(async () => {
  await processIcons("solid");
  await processIcons("outline");
})();