use font awesome chevrons instead of inline svg

[joachimschmidt557]

Description of proposed changes

Have the narrative navigation use chevron icons from font awesome instead of inline svg. auspice already uses font awesome chevrons for the sidebar, so it would make sense to include them here as well.

Icons used:

• https://fontawesome.com/icons/chevron-up?style=solid
• https://fontawesome.com/icons/chevron-down?style=solid

[jameshadfield]

Thanks for this! I have a couple of concrete questions and a bigger question.

Changes Requested:

• There is no longer any padding below the chevron at the bottom of the page (narrative sidebar). This may have been effected before via the SVG path or the viewbox. Please add this padding back in.
• 2 linting errors introduced by this PR to be fixed (npm run lint). I'm working on a GitHub action to flag this automatically for PRs.

Philosophical Questions:

• We currently import 42kb (7kb gz) of fa CSS but use it in very few places. Removing fa is identified as a performance improvement in [meta issue] potential reductions in JS size #702. In other projects i've used import { ICON_NAME } from "react-icons/fa"; which (I believe) will only import the required CSS/SVG. Do you have an opinion on which approach is better?

[joachimschmidt557]

Personally, I think it is best to use react-icons. That way we can still reap the performance benefits while also reducing clutter. But that's just my personal opinion.

[jameshadfield]

Thanks!