Skip to content

FA pro icons font files require specific names but this is not documented #1888

@vonovak

Description

@vonovak

Which package are you using?

@react-native-vector-icons/*

What platform(s) does this occur on?

Android

Minimal reproducible example

https://github.com/oblador/react-native-vector-icons/tree/master/packages/icon-explorer

What happened?

FontAwesome Pro font files must be renamed but this is not documented

Problem

The FontAwesome Pro packages (fontawesome5-pro, fontawesome6-pro, and all fontawesome-pro-* single-style packages) expect font files with specific names (e.g. FontAwesome6_Pro_Solid.ttf), but the fonts downloaded from the @fortawesome/fontawesome-pro npm package have different names (e.g. fa-solid-900.ttf).

On Android, fonts are referenced by filename, so using the wrong filename causes icons to render as question marks. On iOS, fonts are referenced by PostScript name, so the filename doesn't matter — masking this issue.

What's not documented

The READMEs for these packages tell users to place fonts in rnvi-fonts/<package-name>/ but don't mention that renaming is required:

  • fontawesome6-pro/README.md — says "adding the Pro fonts to the rnvi-fonts/fontawesome6-pro directory" with no mention of renaming
  • fontawesome-pro-brands/README.md (generated) — shows the expected filename (fa-brands-400.ttf) which happens to match, but other packages like fontawesome-pro-solid expect FontAwesome6_Pro_Solid.ttf while the npm package provides fa-solid-900.ttf

Where the expected names come from

Each package's .yo-rc.json defines meta.styles with a name field for each style — this is the expected font filename. The generated src/index.tsx passes it as fontFileName to createIconSet, and on Android this becomes the font reference.

The fa-upgrade script does rename but doesn't cover all cases

The fa-upgrade script correctly renames fonts, but:

  1. It's missing newer v6 styles (duotone-light, duotone-regular, duotone-thin, sharp-duotone-*)
  2. Users who set up fonts manually (as the README suggests) won't know about the renaming

Suggested fixes

  1. Document the required filenames in the fontawesome6-pro and fontawesome5-pro READMEs, listing the exact rename mapping
  2. Update fa-upgrade to cover all current styles (or derive the mapping from .yo-rc.json instead of hardcoding)
  3. Consider using the original filenames (fa-solid-900.ttf etc.) as the fontFileName in .yo-rc.json so no renaming is needed — but this would mean v5 and v6 icons cannot be used together as they use the same file names
  4. something else (that'll be the best solution probably)

Relevant log output

Your computer environment

n/a

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions