https://github.com/skovy/font-awesome-codemod
⚙️ Font Awesome codemod script
https://github.com/skovy/font-awesome-codemod
List: font-awesome-codemod
codemod font-awesome jscodeshift typescript
Last synced: 25 days ago
JSON representation
⚙️ Font Awesome codemod script
- Host: GitHub
- URL: https://github.com/skovy/font-awesome-codemod
- Owner: skovy
- Created: 2019-10-07T03:23:50.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T15:03:24.000Z (over 3 years ago)
- Last Synced: 2025-11-04T17:01:48.714Z (6 months ago)
- Topics: codemod, font-awesome, jscodeshift, typescript
- Language: TypeScript
- Homepage: https://skovy.dev/jscodeshift-custom-transform
- Size: 345 KB
- Stars: 48
- Watchers: 2
- Forks: 3
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# font-awesome-codemod [](https://travis-ci.org/skovy/font-awesome-codemod)
This repository contains a codemod script to use with [jscodeshift](https://github.com/facebook/jscodeshift).
## :hammer_and_wrench: Setup & Run
```sh
# Globally install (or consider using npx)
yarn global add jscodeshift
# Clone the transform (or try https://github.com/skovy/font-awesome-codemod)
git clone git@github.com: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
```
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](https://github.com/facebook/jscodeshift#usage-cli) if not using vanilla JavaScript.
## :gear: 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.
## :mag: Example
### :arrow_right: Input
```tsx
import * as React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const Component = () => {
return ;
};
```
### ️ :arrow_left: Output
```tsx
import * as React from "react";
import { faMinusCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const Component = () => {
return ;
};
```