Even though we're using USWDS in this project, there are not actually many icons included by default. Therefore, we've set up react-fontawesome in order to be able to easily include icons from Font Awesome. Specifically, we are using the library implementation described here.
To view icons we have already added, you can view the Basics > Icons page in Storybook.
- Find the icon you want to add by searching at https://fontawesome.com/icons?d=gallery
As of now we have only included the
free-solid-svg-icons
set. When you search, make sure to filter by "Free" and "Solid". If you need an icon that is not in this set, we can add more free sets but should be wary of adding too many resources.
- Add the icon using its name to
src/initIcons.ts
. The icon should be imported from the @fortawesome package, and then added to thelibrary.add
statement. It should be prefixed withfa
and camelCased. For example, to add air-freshener:
// src/initIcons.ts
import {
// other existing icons...
+ faAirFreshener,
} from '@fortawesome/free-solid-svg-icons'
library.add(
// other existing icons...
+ faAirFreshener
)
- Add an example of the icon to the Icons Storybook page
- Import the
FontAwesomeIcon
component if it is not already included:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
- Render the component, passing the icon name without the
fa
prefix and snake-cased instead of camelCased as the icon prop:
<FontAwesomeIcon icon="air-freshener" />
- react-fontawesome lets you do some basic customization using props, like change the size and orientation. See full documentation here. Color is set using the
color
CSS property (since the icons are rendered as SVG, they can be styled using CSS as well).