[Bug]: Icons are not showing correctly on Windows

[ClaudiuHBann]

Which package are you using?

@react-native-vector-icons/[email protected]

What platform(s) does this occur on?

Windows 11

What happened?

I npm installed @react-native-vector-icons/[email protected] in a React Native Fabric project and on Android works perfectly but on Windows it just shows a rectangle (for Windows I added the Feather.ttf file to the Assets folder):

Relevant log output

There are no errors...

Minimal reproducible example

npm install @react-native-vector-icons/[email protected] add Feather.ttf to Assets add any icon npm run windows

Your computer environment

System:
  OS: Windows 11 10.0.26100
  CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12500H
  Memory: 2.80 GB / 15.71 GB
Binaries:
  Node:
    version: 20.10.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.22
    path: ~\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 10.8.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.18362.0
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: AI-241.18034.62.2412.12266719
  Visual Studio:
    - 17.12.35707.178 (Visual Studio Community 2022)
Languages:
  Java: 22.0.2
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.0
    wanted: 15.0.0
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.78.0
    wanted: 0.78.0
  react-native-windows:
    installed: 0.78.0
    wanted: 0.78.0
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

[johnf]

@ClaudiuHBann I personally haven't used RNVI on windows but we recently updated the docs

https://github.com/oblador/react-native-vector-icons/blob/master/docs/SETUP-REACT-NATIVE.md#windows

Can you check if perhaps Step 2 helps?

[ClaudiuHBann]

@johnf I can't see a Assets folder for a RNW generated project. Do I need to add one and configure it myself or?

[johnf]

I'm not sure. @DylanAkp can you help?

[DylanAkp]

@johnf I can't see a Assets folder for a RNW generated project. Do I need to add one and configure it myself or?

The folder was already there in my case, did you ran the project using Visual Studio ?

[ClaudiuHBann]

Maybe the new RNW projects doesn't setup the Assets folder by default. I generated a project for RNW 0.77 and I don't have one.

[ClaudiuHBann]

@johnf @DylanAkp Update, I added the font into the Assets folder, the msix contains the font under the Assets folder but the react-native-vector-icons doesn't find it, where does it look more exactly for the font?

[johnf]

@ClaudiuHBann All this library really tries to do is copy the font to the right place and is a wrapper. Under the hood it is basically doing

<Text style={{ fontFamily }}>unicode glyph of the font you want</Text>

Now in the code we set fontFamily to /Assets/${fontFileName}#${postScriptName}

which in the case of feather would be /Assets/Feather.ttf#Feather

Could it be a case issue maybe you have it as feather.ttf?

[ClaudiuHBann]

@johnf I think this issue can be closed because in the end I used react-native-svg and pass the SVG's XML to the SvgCss component.

[johnf]

@ClaudiuHBann thanks