Icons doc

add-icons.md

How to add icons

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.

Available Icons

To view icons we have already added, you can view the Basics > Icons page in Storybook.

Adding New Icons

1. 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.

2. Add the icon using its name to src/initIcons.ts. The icon should be imported from the @fortawesome package, and then added to the library.add statement. It should be prefixed with fa 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
  )

3. Add an example of the icon to the Icons Storybook page

Using Icons

1. Import the FontAwesomeIcon component if it is not already included:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

2. 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" />

3. 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).