diff --git a/migrating-from-expo-vector-icons.md b/migrating-from-expo-vector-icons.md new file mode 100644 index 0000000..a5e05e6 --- /dev/null +++ b/migrating-from-expo-vector-icons.md @@ -0,0 +1,107 @@ +# Migrating from @expo/vector-icons to react-native-vector-icons + +Since SDK 54, we recommend using packages from [@react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) instead of `@expo/vector-icons`. This short guide will help you migrate your existing code. In case you encounter a problem, [open an issue](https://github.com/expo/vector-icons). + +## Installation + +First, install the new package(s) according to the table below, and replace the imports. + +> [!WARNING] +> Mixing the same icon families from `@expo/vector-icons` and `@react-native-vector-icons/*` in a project leads to hard-to-diagnose issues, ensure you replace all imports. + + +| Old Import | New Import | +| ------------------------------------------- | -------------------------------------------------- | +| `@expo/vector-icons/AntDesign` | `@react-native-vector-icons/ant-design` | +| `@expo/vector-icons/Entypo` | `@react-native-vector-icons/entypo` | +| `@expo/vector-icons/EvilIcons` | `@react-native-vector-icons/evil-icons` | +| `@expo/vector-icons/Feather` | `@react-native-vector-icons/feather` | +| `@expo/vector-icons/FontAwesome` | `@react-native-vector-icons/fontawesome` | +| `@expo/vector-icons/FontAwesome5` | `@react-native-vector-icons/fontawesome5` | +| `@expo/vector-icons/FontAwesome6` | `@react-native-vector-icons/fontawesome6` | +| `@expo/vector-icons/Fontisto` | `@react-native-vector-icons/fontisto` | +| `@expo/vector-icons/Foundation` | `@react-native-vector-icons/foundation` | +| `@expo/vector-icons/Ionicons` | `@react-native-vector-icons/ionicons` | +| `@expo/vector-icons/MaterialCommunityIcons` | `@react-native-vector-icons/material-design-icons` | +| `@expo/vector-icons/MaterialIcons` | `@react-native-vector-icons/material-icons` | +| `@expo/vector-icons/Octicons` | `@react-native-vector-icons/octicons` | +| `@expo/vector-icons/SimpleLineIcons` | `@react-native-vector-icons/simple-line-icons` | +| `@expo/vector-icons/Zocial` | `@react-native-vector-icons/zocial` | + +## Set up `expo-font` config plugin + +This is an optional step that can be beneficial to your app's performance, as it avoids loading icon font files at runtime. [Read more](https://github.com/oblador/react-native-vector-icons/blob/master/docs/SETUP-EXPO.md). + +## Remove the old package + +After migrating your imports, remove the old package: + +```bash +npm uninstall @expo/vector-icons +# or +yarn remove @expo/vector-icons +``` + +## Examples + +### Before (using @expo/vector-icons) + +```tsx +import React from "react"; +import Ionicons from "@expo/vector-icons/Ionicons"; +import MaterialIcons from "@expo/vector-icons/MaterialIcons"; +import FontAwesome from "@expo/vector-icons/FontAwesome"; + +export default function IconExample() { + return ( + <> + + + + + ); +} +``` + +### After (using react-native-vector-icons) + +```tsx +import React from "react"; +import Ionicons from "@react-native-vector-icons/ionicons"; +import MaterialIcons from "@react-native-vector-icons/material-icons"; +import FontAwesome from "@react-native-vector-icons/fontawesome"; + +export default function IconExample() { + return ( + <> + + + + + ); +} +``` + +### Custom Icon Sets + +If you were using `createIconSet` from `@expo/vector-icons`, replace it with the equivalent from `@react-native-vector-icons/common`: + +```tsx +// Before +import createIconSet from "@expo/vector-icons/createIconSet"; + +// After +import createIconSet from "@react-native-vector-icons/common"; +``` + +## Troubleshooting + +### Icon Names + +Due to updated icon families, some icon names might be slightly different. Check the [react-native-vector-icons directory](https://oblador.github.io/react-native-vector-icons/). + +## Need Help? + +- [react-native-vector-icons documentation](https://github.com/oblador/react-native-vector-icons) +- [Icon directory](https://oblador.github.io/react-native-vector-icons/) +- [`@expo/vector-icons` issue tracker](https://github.com/expo/vector-icons)