Rewrite library with TypeScript, update to modern React & Jest conventions

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.github/workflows/ci.yml

@@ -1,50 +1,51 @@
 name: CI
 
-on: [push, pull_request]
+on: [push, pull_request_target]
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        free-solid-svg-icons: [7.x, 6.x, 5.x]
-        fontawesome-svg-core: [7.x, 6.x, 1.2.x]
-        node-version: [20.x, 18.x]
-        react: [19.x, 18.x, 17.x, 16.x]
+        free-solid-svg-icons: [7.x, 6.x]
+        fontawesome-svg-core: [7.x, 6.x]
+        node-version: [24.x, 22.x, 20.x]
+        react: [19.x, 18.x]
         exclude:
           # For v7.x core, allow all icon versions
-          # For v6.x and v1.2.x core, exclude v7.x icons
+          # For v6.x exclude v7.x icons
           - free-solid-svg-icons: '7.x'
             fontawesome-svg-core: '6.x'
-          - free-solid-svg-icons: '7.x'
-            fontawesome-svg-core: '1.2.x'
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
+          registry-url: https://npm.fontawesome.com/
+          scope: '@fortawesome'
+          cache: 'npm'
 
       - name: Install base dependencies
-        run: npm install --no-audit --no-save
+        run: npm ci --no-audit --no-save
 
       - name: Install React dependencies
-        run: npm install --no-save react@${{ matrix.react }} react-dom@${{ matrix.react }} react-test-renderer@${{ matrix.react }}
+        run: npm ci --no-save react@${{ matrix.react }} react-dom@${{ matrix.react }}
 
       - name: Install FontAwesome dependencies
-        run: npm install --no-save @fortawesome/fontawesome-svg-core@${{ matrix.fontawesome-svg-core }} @fortawesome/free-solid-svg-icons@${{ matrix.free-solid-svg-icons }}
+        run: npm ci --no-save @fortawesome/fontawesome-svg-core@${{ matrix.fontawesome-svg-core }} @fortawesome/free-solid-svg-icons@${{ matrix.free-solid-svg-icons }}
 
       - name: Verify React version
-        run: npm list react react-dom react-test-renderer
+        run: npm list react react-dom
 
-      - name: Build and test
+      - name: Lint and test
         run: |
-          npm run build
           npm run lint
+          npm run format:check
           npm run test
 
-      - name: Build distribution
-        run: npm run dist
+      - name: Build
+        run: npm run build

.gitignore

@@ -2,3 +2,5 @@ node_modules
 .DS_Store
 bin/act
 fortawesome-react-fontawesome-*.tgz
+dist/
+coverage/

.npmrc

@@ -0,0 +1,3 @@
+@fortawesome:registry=https://npm.fontawesome.com/
+@awesome.me:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}

.prettierignore

@@ -1 +1 @@
-/index.*
+/dist

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "arrowParens": "always",
+  "bracketSameLine": true,
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "quoteProps": "as-needed",
+  "singleQuote": true,
+  "semi": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

.tool-versions

@@ -1,2 +1,2 @@
-nodejs 22.11.0
+nodejs 22.17.1
 python 3.9.19 2.7.18

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "Orta.vscode-jest"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,32 @@
+{
+  // VSCode Core Settings
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "javascript.format.enable": false, // formatting is handled by prettier
+  "javascript.validate.enable": false, // validation is handled by typescript and eslint
+  "typescript.tsdk": "node_modules/typescript/lib", // ensure VSCode uses the local TypeScript version
+  // Language-specific Overrides
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[svg]": {
+    "editor.defaultFormatter": "jock.svg"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  // Extension Settings
+  "eslint.enable": true,
+  "eslint.format.enable": false, // formatting is handled by prettier
+  "prettier.enable": true,
+  "jest.shell": "zsh"
+}

CHANGELOG.md

@@ -6,6 +6,20 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ---
 
+## [3.0.0](https://github.com/FortAwesome/react-fontawesome/releases/tag/3.0.0) - 2025-07-29
+
+### Changed
+
+- Rewrote the entire library from plain JavaScript to TypeScript
+- Dropped support for end-of-life FontAwesome versions (below v6), Node versions (below 20.x) and React versions (below 18.x)
+- Replaced `rollup` with `tsup` for providing both ESM and CJS exports from one TypeScript source
+- Removed `prop-types` in favour of colocated typings for React component props
+- Upgraded `eslint` from v6 to v9, rewrote config as Flat Config, modernised ESLint config, plugins and rules
+- Refactored all unit tests from the deprecated `react-test-renderer` to the industry standard `@testing-library/react`
+- Upgraded all other development dependencies to latest versions as of 2025-07-29
+
+---
+
 ## [0.2.5](https://github.com/FortAwesome/react-fontawesome/releases/tag/0.2.5) - 20205-08-15
 
 ### Fixed

CODE_OF_CONDUCT.md

@@ -14,21 +14,21 @@ orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
+- The use of sexualized language or imagery and unwelcome sexual attention or
   advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
   address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Our Responsibilities

CONTRIBUTING.md

@@ -8,14 +8,14 @@ but intended to evolve over time with _community_ contributions.
 Trying to figure out how to make it work? Or how to use it in your scenario?
 
 1.  Review the [README](README.md)
-1.  Get familiar with the documentation for the [SVG with JavaScript](https://fontawesome.com/how-to-use/svg-with-js) implementation,
+2.  Get familiar with the documentation for the [SVG with JavaScript](https://fontawesome.com/how-to-use/svg-with-js) implementation,
     the framework upon which this component is built. Sometimes the answers you need may be there.
-1.  Post any remaining questions on [StackOverflow](https://stackoverflow.com/questions/tagged/react-fontawesome) with the tag `react-fontawesome`.
+3.  Post any remaining questions on [StackOverflow](https://stackoverflow.com/questions/tagged/react-fontawesome) with the tag `react-fontawesome`.
 
 ## Report a Bug
 
 1.  Create a test case that reproduces the unexpected behavior
-1.  [Open a new issue with this template](https://github.com/FortAwesome/react-fontawesome/issues/new?template=bug-report.md),
+2.  [Open a new issue with this template](https://github.com/FortAwesome/react-fontawesome/issues/new?template=bug-report.md),
     and be sure to include a link to the reproduction you made with StackBlitz.
 
 ## Submit a Pull Request
@@ -30,15 +30,11 @@ Add tests if you add code.
 # Project Goals
 
 1.  Achieve and maintain feature parity with Font Awesome's [SVG with JavaScript](https://fontawesome.com/how-to-use/svg-with-js) method.
-
-1.  Keep with best practices in the React development community.
-
-1.  Stay current with major developments in React and create-react-app
-
-1.  Maintain a reasonable level of consistency between this component and the other Font Awesome official JavaScript
+2.  Keep with best practices in the React development community.
+3.  Stay current with major developments in React
+4.  Maintain a reasonable level of consistency between this component and the other Font Awesome official JavaScript
     framework components ([Vue](https://github.com/FortAwesome/vue-fontawesome), [Angular](https://github.com/FortAwesome/angular-fontawesome), [Ember](https://github.com/FortAwesome/react-fontawesome))
-
-1.  Sharing responsibility: The Font Awesome team will continue to be involved in ongoing development, hoping to _propel_
+5.  Sharing responsibility: The Font Awesome team will continue to be involved in ongoing development, hoping to _propel_
     the project's momentum as we make _our_ contributions, while minimizing any bottle-necking that may happen as we balance
     our own priorities across various projects. Ideally, members of the community will enjoy lending a hand to help keep
     the project moving forward by responding to issues, answering questions on StackOverflow, reviewing and merging pull
@@ -53,6 +49,6 @@ We'll contribute according to the [Code of Conduct](CODE_OF_CONDUCT.md).
 We're seeking core contributors to help drive this project. Core contributors:
 
 1.  Share these goals
-1.  Demonstrate competence through contributions
-1.  Contribute with conduct fitting with our code of conduct
-1.  Want to make this project awesome
+2.  Demonstrate competence through contributions
+3.  Contribute with conduct fitting with our code of conduct
+4.  Want to make this project awesome

DEVELOPMENT.md

@@ -16,30 +16,28 @@ The following commands are available through `npm run`
 <a name="release"></a>
 
 1. Edit `package.json` and update the version number
-1. Add new contributors to the `contributors` section
-1. Update the `CHANGELOG.md`
-1. Update the `README.md` contributors section
-1. `npm run build`
-1. `npm run install.5`
-1. `npm run test`
-1. `npm run install.6`
-1. `npm run test`
-1. `npm run install.7`
-1. `npm run test`
-1. `npm publish --tag latest-0.2 --tag latest`
-1. `npm publish --tag latest-0.2 --tag latest --registry https://npm.fontawesome.com` (publish to Pro registry)
-1. `git add . && git commit -m 'Release VERSION'`
-1. `git push`
-1. Create a [new release](https://github.com/FortAwesome/react-fontawesome/releases/new) with `CHANGELOG` details
+2. Add new contributors to the `contributors` section
+3. Update the `CHANGELOG.md`
+4. Update the `README.md` contributors section
+5. `npm run build`
+6. `npm run install.6`
+7. `npm run test`
+8. `npm run install.7`
+9. `npm run test`
+10. `npm publish --tag latest-0.2 --tag latest`
+11. `npm publish --tag latest-0.2 --tag latest --registry https://npm.fontawesome.com` (publish to Pro registry)
+12. `git add . && git commit -m 'Release VERSION'`
+13. `git push`
+14. Create a [new release](https://github.com/FortAwesome/react-fontawesome/releases/new) with `CHANGELOG` details
 
 ## Authenticating with the npm.fontawesome.com registry
 
 Contributors with authorization to publish to npm.fontawesome.com will receive an invite
 from a Font Awesome project owner.
 
 1. Respond to the invite in your email
-1. Let the owner know when you've setup your account
-1. Owner will add you to the team
+2. Let the owner know when you've setup your account
+3. Owner will add you to the team
 
 You can then run:
 

README.md

@@ -21,18 +21,28 @@
 
 ## Documentation
 
-`react-fontawesome` now supports `forwardRef` for version `0.2.x` or above. This was a breaking change so if you are using React older than version 16.3.0 choose the `0.1.x` version of this component.
+Version 3.0.0 is a major update for `react-fontawesome` with the library being rewritten from plain JS to TypeScript,
+amongst a number of performance improvements and optimisations to the `FontAwesomeIcon` React component.
+
+While it is a major update, there should be no breaking changes aside from those noted in the Compatibility section below.
 
 ## Compatibility
 
-| React version | react-fontawesome version |
-| ------------- | ------------------------- |
-| < 16.3.0      | 0.1.x                     |
-| >= 16.3.0     | 0.2.x                     |
+With the release of FontAwesome v7, we have marked v5 as End-of-Life. Both v6 and v7 will continue to be supported.
+
+In `react-fontawesome v3.0.0` we have also dropped support for End-of-Life versions of React and Node.js as well as IE11 browser support.
+
+If you need to use `react-fontawesome` with legacy versions, please consult the table below.
+
+| React version | react-fontawesome version | FontAwesome Core versions | Node versions    |
+| ------------- | ------------------------- | ------------------------- | ---------------- |
+| >= 18.0.0     | 3.x.x                     | 6.x, 7.x                  | 20.x, 22.x, 24.x |
+| >= 16.3.0     | 0.2.x                     | 5.x, 6.x, 7.x             | 18.x, 20.x       |
+| < 16.3.0      | 0.1.x                     | 5.x, 6.x                  | 14.x, 16.x       |
 
 Official documentation is hosted at fontawesome.com:
 
-[Check it out here](https://fontawesome.com/v6/docs/web/use-with/react/)
+[Check it out here](https://docs.fontawesome.com/web/use-with/react)
 
 ## How to Help
 
@@ -43,7 +53,7 @@ Review the following docs before diving in:
 
 And then:
 
-1.  Check the existing issue and see if you can help!
+- Check the [existing issues](https://github.com/FortAwesome/react-fontawesome/issues) and see if you can help!
 
 ## Contributors
 

UPGRADING.md

@@ -83,9 +83,9 @@ module.exports = {
   resolve: {
     alias: {
       '@fortawesome/fontawesome-free-solid$':
-        '@fortawesome/fontawesome-free-solid/shakable.es.js'
-    }
-  }
+        '@fortawesome/fontawesome-free-solid/shakable.es.js',
+    },
+  },
 }
 ```
 
@@ -97,9 +97,9 @@ rollup({
   plugins: [
     alias({
       '@fortawesome/fontawesome-free-solid':
-        'node_modules/@fortawesome/fontawesome-free-solid/shakable.es.js'
-    })
-  ]
+        'node_modules/@fortawesome/fontawesome-free-solid/shakable.es.js',
+    }),
+  ],
 })
 ```