React Native中Font Awesome常规图标无法找到问题求助

Root Cause #

The error @fontawesome/free-regular-svg-icons/faArrowLeft could not be found occurs because faArrowLeft does not have a free regular variant in Font Awesome's free icon set. Many icons (including faArrowLeft) are only available in the solid style for free users.

Step-by-Step Solutions #

1. Use Icons With Free Regular Variants

For icons that do exist in the free regular set (like faPlus), adjust your import path correctly:

// Import from the package root (supports tree-shaking)
import { faPlus } from "@fortawesome/free-regular-svg-icons";

// Or import individual icon files directly
import { faPlus } from "@fortawesome/free-regular-svg-icons/faPlus";

2. Handle Icons Without Free Regular Variants

If you need a left arrow in regular style, choose one of these options:

• Switch to an alternative icon: Look for a similar icon that has a free regular variant (e.g., check Font Awesome's icon library for comparable options).
• Upgrade to Font Awesome Pro: The Pro tier includes regular variants for more icons, including faArrowLeft.

3. Confirm Package Installation

Double-check that you installed the regular icon package correctly:

npm install --save @fortawesome/free-regular-svg-icons

If using Yarn:

yarn add @fortawesome/free-regular-svg-icons

Example Working Code #

Here’s how to use faPlus in regular style alongside faArrowLeft in solid:

import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
import { faPlus } from "@fortawesome/free-regular-svg-icons/faPlus";

// Component usage
<FontAwesomeIcon icon={faArrowLeft} size={50} />
<FontAwesomeIcon icon={faPlus} size={50} />

内容的提问来源于stack exchange，提问作者George Garman