Migrate from tabler-icons-react to @tablers/icons

[hckhanh]

I want to share jscodeshift script to migrate from tabler-icons-react to @tablers/icons

Use this command to run:

jscodeshift --parser='ts,tsx' --extensions=tsx "./path-to-your-src-folder"

export default function (file, api, options) {
  const j = api.jscodeshift;
  const root = j(file.source);

  const imports = root
    .find(j.ImportDeclaration)
    .filter((importNode) => importNode.node.source.value === "tabler-icons-react");

  imports.find(j.ImportSpecifier).forEach((specifier) => {
    const newVariable = `Icon${specifier.node.imported.name}`;
    const elements = root.find(j.JSXElement);

    root
      .find(j.Identifier)
      .filter((identifier) => identifier.value.name === specifier.node.imported.name)
      .replaceWith((identifier) =>
        identifier.value.name === "Icon"
          ? j.identifier("TablerIcon")
          : j.identifier(newVariable)
      );

    if (specifier.node.imported.name === "Icon") {
      return;
    }

    elements
      .filter(
        (element) =>
          element.value.openingElement.name.name === specifier.node.imported.name
      )
      .replaceWith((element) =>
        j.jsxElement(
          j.jsxOpeningElement(
            j.jsxIdentifier(newVariable),
            element.value.openingElement.attributes,
            true
          ),
          element.value.closingElement
        )
      );

    elements
      .find(j.JSXAttribute)
      .filter(
        (attribute) =>
          attribute.node.value?.expression?.name === specifier.node.imported.name
      )
      .replaceWith((attribute) => {
        attribute.node.value.expression.name = newVariable;
        return j.jsxAttribute(attribute.value.name, attribute.node.value);
      });
  });

  imports.replaceWith((importNode) =>
    j.importDeclaration(importNode.node.specifiers, j.stringLiteral("@tabler/icons"))
  );

  return root.toSource();
}