New Major Version Coming (Testers wanted)

johnf commented 2 months ago

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 bundle 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 bundle 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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 3 weeks ago

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 commented 1 week ago

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

johnf commented 6 days ago

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 commented 6 days ago

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 commented 6 days ago

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

oblador / react-native-vector-icons