Skip to content

Latest commit

 

History

History
111 lines (77 loc) · 3.16 KB

MIGRATION.md

File metadata and controls

111 lines (77 loc) · 3.16 KB
Raw

Migration from react-native-vector-icons

@react-native-vector-icons requires close to no setup, so you will need to undo a couple of things when you migrate.

We have created a codemod which will try to migrate your code and settings.

WARNING: Make sure your code is committed to git or backed up before executing the codemod and review all changes before committing them.

npx @react-native-vector-icons/codemod

This will attempt to execute many of the manual steps below. Jump to FIXME to implement the steps it doesn't support yet. The codemod is a best effort, read through all the manual steps to ensure they have been completed.

Migration steps

package.json (supported by codemod)

Remove react-native-vector-icons from your dependencies and replace with the fonts you intend to use, e.g. @react-native-vector-icons/fontisto.

imports (supported by codemod)

Update your import statements to use the new library names

// Old
import Fontisto from 'react-native-vector-icons';

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

Move to new props for Fontawesome 5 and 6 (supported by codemod)

The FontAwesome 5 and 6 fonts now take an iconStlye prop instead of a style name prop

// Old
<FontAwesome5 name="house" solid />

// New
<FontAwesome5 name="house" iconType="solid" />

Note: The codemod assumes you used the naming from the old README for your component e.g. FontAwesome5 etc or Icon If you have imported the component with another name you will need to modify the codemod or make the changes yourself.

Remove fonts from Info.plist (supported by codemod)

Fonts are now automatically loaded on iOS, so you can remove any fonts you have listed in Info.plist

iOS

If you aren't using any other fonts, remove the Fonts folder and any fonts you have added.

Select your project in the navigator, choose your app's target, go to the Build Phases tab, and under Copy Bundle Resources, remove any fonts.

Remove any entried in react-native.config.js

react-native.config.js
module.exports = {
    dependencies: {
    // Remove any entries like this
      'react-native-vector-icons': {
        platforms: {
          ios: null,
        },
      },
    },
  };

Android

Remove the fonts.gradle import and any custmoisations from android/app/build.gradle

// Delete this section if it exists
project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Specify font files
]

// Delete this line
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

If you are using getImageSource or getImageSourceSync remove the lines in android/settings.gradle

// Delete these
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

Do the same in android/app/build.gradle

// Delete this line
implementation project(':react-native-vector-icons')

Remove the code from MainApplication.java

// Delete this
import com.oblador.vectoricons.VectorIconsPackage;

// and this
, new VectorIconsPackage()