README.md

font-awesome-codemod

This repository contains a codemod script to use with jscodeshift.

🛠️ Setup & Run

# Globally install (or consider using npx)
yarn global add jscodeshift

# Clone the transform (or try https://github.com/skovy/font-awesome-codemod)
git clone [email protected]:skovy/font-awesome-codemod.git

# Install the transform's dependencies
cd font-awesome-codemod
yarn install
cd ..

# Run the transform against your project
jscodeshift -t font-awesome-codemod/transforms/implicit-icons-to-explicit-imports.ts <file>

Use the -d option for a dry-run and use -p to print the output for comparison. Also be sure to set the proper --parser and --extensions jscodeshift options if not using vanilla JavaScript.

⚙️ Options:

All options have a default but can be set with the following options:

--componentName:

Type: string

Default: FontAwesomeIcon

Example: --componentName=Icon

The name of the component to update the icon usage

--propName

Type: string

Default: icon

Example: --propName=iconProp

The name of the prop on the component to update the icon usage.

--type

Type: "free" | "pro"

Default: free

Example: --type=pro

The type of packages (imports) to replace the icons usages.

🔍 Example

➡️ Input

import * as React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const Component = () => {
  return <FontAwesomeIcon icon="minus-circle" />;
};

️ ⬅️ Output

import * as React from "react";
import { faMinusCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const Component = () => {
  return <FontAwesomeIcon icon={faMinusCircle} />;
};