New Major Version Coming (Testers wanted)

[johnf]

Hi All,

We have been working on a major refactor of React Native Vector Icons to move it to a monorepo structure with individual packages for each font.

The major changes are

• Simple setup - only npm install needed
• Package per font - Only install the fonts you need for smaller binary sizes
• Typescript support
• All fonts updated
• Font package generator - easily ship new fonts
• codemod for easy migration

We've released an alpha version and would love feedback on any issues before we go GA.

Check out the migration guide in MIGRATION.md

Help Needed! Can someone help make installation for OSX and Windows projects fully automated as well?

More details on all of the changes are below.

Simple setup

Significant effort has gone into automating the entire setup experience. For a new user adding a font should be as simple as follows:

npm install @react-native-vector-icons/common @react-native-vector-icons/fontisto
cd ios && pod update
npm android
npm ios

import Fontisto from '@react-native-vector-icons/fontisto'

const App = () => <Fontisto name="comments" />

Package per font

Each font has its own npm package, which means you only get the fonts you want in your final build. For example, @react-native-vector-icons/evil-icons. The version numbers for the individual packages will track the upstream versions. This should provide more stability for your projects regarding knowing which glyphs will be supported in the font.

Significant improvements should be made in binary sizes. For example, if you only need the evil icons font, instead of including 2.8MB of fonts, you would only include 14kB.

New npm scope

The npm modules are now hosted under @react-native-vector-icons.

Native typescript support and auto-completion

All packages are now written in typescript and export types.

LSP-based autocompletion should now be significantly improved, with the completion of icon names, including support for multi-style icons like FontAwesome 5 and 6.

Font updates

All fonts have been updated to the very latest versions. In the future, we intend to have automation via GitHub actions to track upstream fonts and release new versions automatically.

Font template generator

We have created a Yeoman generator, @react-native-vector-icons/generator-react-native-vector-icons, that you can use to create packages for your fonts. We use this to generate all the internal font packages. See the documentation for more details. We will also welcome pull requests for new fonts. In the future, we'll write some GitHub actions to auto-update and publish based on upstream changes.

Other changes

Backwards computability with react-vector-icons has been removed.

Icon.Button has been removed.

The following methods have been removed

• getFontFamily
• getRawGlyphMap
• hasIcon
• getStyledIconSet

Fontawesome 5 & 6 now take an iconStyle prop to switch between icon styles like solid, sharp, etc.

Migration

A migration guide can be found in MIGRATION.md. We have created a codemod to help with the heavy lifting, and documented all the steps.

[wbxl2000]

I would like to ask, is there a plan to update the website?

The current website has some shortcomings, such as slow loading and low search efficiency(#1215 #1025 ).

Maybe we can find some people to improve it together. 💪

[johnf]

I've seen those issues, and once we complete this release, I plan to review the website.

I would be more than happy to take PRs from anyone willing to help. Maybe kick off a discussion in a new issue if you're interested with your thoughts?

[fredlemieux]

I've tried following the instructions for installation. I'm just getting a question mark for icons in the iOS simulator. It's a bare react-native application (no Expo), using react-native init, there is nothing else in this project.

I've run the pod install step, this completes with no errors. I've tried both FontAwesome6 and Feather:

// Imports
import FontAwesome6 from '@react-native-vector-icons/fontawesome6';
import Feather from '@react-native-vector-icons/feather';
// redacted code
<FontAwesome6 name="comments" iconStyle="solid" size={30} />
<Feather name="send" />

the result is:

Package.json below:

{
  "name": "VoiceAssistantDemo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-vector-icons/common": "^0.0.1-alpha.6",
    "@react-native-vector-icons/feather": "^4.29.1-alpha.9",
    "@react-native-vector-icons/fontawesome6": "^6.5.2-alpha.12",
    "react": "18.2.0",
    "react-native": "0.74.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.74.83",
    "@react-native/eslint-config": "0.74.83",
    "@react-native/metro-config": "0.74.83",
    "@react-native/typescript-config": "0.74.83",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  },
  "packageManager": "yarn@3.6.4"
}

Please advise how I can debug what's going on, I'm happy to provide more info. But from the docs this should "just work"...

[valn1]

hi, i tried using this alpha version and found this issue, that i was not able to solve https://github.com/oblador/react-native-vector-icons/issues/1625

[rashidul0405]

it is working fine on iOS. This is so much better. will you release this soon?

[johnf]

I've tried following the instructions for installation. I'm just getting a question mark for icons in the iOS simulator. It's a bare react-native application (no Expo), using react-native init, there is nothing else in this project.

Sorry for the delay I missed this message.

Can you try again with the latest version? I've fixed a number of bugs since

[johnf]

it is working fine on iOS. This is so much better. will you release this soon?

Hoping to merge the code into main and create a 0.0.1 release this week.

[rashidul0405]

it is working fine on iOS. This is so much better. will you release this soon?

Hoping to merge the code into main and create a 0.0.1 release this week.

Also working on android without any fuss. Thanks

[xiaoyaotan12345]

### Compilation error "react-native": "0.74.2", "@react-native-vector-icons/common": "^0.0.1-alpha.11", "@react-native-vector-icons/fontawesome6": "^6.5.2-alpha.19", newArchEnabled=true @johnf

[ShivamJoker]

@johnf the Ionicons variants are not working properly, I inspected the font and saw all the icons are filled.

PS: I tried running the build locally and it kept giving error. Can you please look into this?

[valn1]

i noticed this in the scale icon, the normal and sharp versions were just filled squares, had to use the outline version

[seliceantitus]

Is there a way to use the new version in monorepo projects? Currently the Copy Fonts command from react-native-vector-icons.podspec fails because it cannot find node_modules.

We're using NX as our monorepo solution and, as an example, the folder structure is like so:

• apps
  • web
  • mobile
  • ios
  • android
  • src
• node_modules

I got the application to build by editing PROJECT_ROOT from ${PODS_ROOT}/../.. to ${PODS_ROOT}/../../../.. but this is not feasible in the long-run because this has to be done on every dev environment and after every reinstall.

If you have any pointers or solutions for this, I'd greatly appreciate them. Thank you!

[ShivamJoker]

@johnf another issue I found, Ionicons are not working on Android.

import Icon from '@react-native-vector-icons/ionicons';

[johnf]

@ShivamJoker @valn1 The issue of icons being filled in square for ionicons should now be fixed in 7.4.0-alpha.17

[ShivamJoker]

Hey @johnf I am not seeing the icons anymore, can you please help me debug, so that I can report the issues.

[johnf]

@ShivamJoker I think I've finally fixed this properly (famous last words), can you try 7.4.0-alpha.18

[johnf]

I'm going to close this as it's becoming difficult to track issues with the new version in this one thread.

If you have a bug please file an issue, otherwise please create a discussion.

[CodeWithShreyans]

Is there an update on this?