You can take Font Awesome with React to the next level by learning a little more about the behind-the-scenes stuff that we do to load icons and fine-tuning it to exactly what you need.

Advertisement

Unit Testing

When testing components, you’ll want to make sure that any icons referenced in those components are available for testing purposes. You have a couple choices here:

  1. If you want to test a child component on its own, you can import its icons explicitly.
  2. If you’ve built a library instead, and your test doesn’t include your root component that defines your library of icons, you may see errors like this:
Could not find icon { prefix: 'fas', iconName: 'chevron-right' }

If this happens, and the icon isn’t important to the particular test, you can mock FontAwesomeIcon like this:

import React from 'react'

export function FontAwesomeIcon(props) {
  return <i classname="fa"></i>
}

With create-react-app, you can put this code in src/__mocks__/@fortawesome/react-fontawesome.js to automatically include it in any tests, and alleviate errors.

The Font Awesome Javascript API

Are you hungry for more knowledge? You can deep dive into our Font Awesome SVG Core and Javascript API docs.

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!