chore: update react-native-vector-icons (#4696)

Author: lukewalczak

.github/workflows/versions.yml

@@ -8,14 +8,11 @@ jobs:
     if: ${{ github.event.label.name == 'bug' }}
     runs-on: ubuntu-latest
     steps:
-      - uses: react-navigation/check-versions-action@v1.0.0
+      - uses: react-navigation/check-versions-action@v1.1.0
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           required-packages: |
-            react-native
             react-native-paper
-            react-native-vector-icons
           optional-packages: |
-            expo
-            npm
-            yarn
+            @react-native-vector-icons/common
+            @react-native-vector-icons/material-design-icons

docs/docs/guides/01-getting-started.md

@@ -6,13 +6,13 @@ title: Getting Started
 
 ## Installation
 
-* Open a Terminal in your project's folder and run:
+- Open a Terminal in your project's folder and run:
 
 ```bash npm2yarn
 npm install react-native-paper
 ```
 
-* From `v5` there is a need to install [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area.
+- From `v5` there is a need to install [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe area.
 
 ```bash npm2yarn
 npm install react-native-safe-area-context
@@ -24,19 +24,25 @@ Additionaly for `iOS` platform there is a requirement to link the native parts o
 npx pod-install
 ```
 
-* If you're on a vanilla React Native project, you also need to install and link [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).
+- If you're on a vanilla React Native project, you also need to install and link [@react-native-vector-icons/common](https://github.com/oblador/react-native-vector-icons).
 
-Specifically `MaterialCommunityIcons` icon pack needs to be included in the project, because some components use those internally (e.g. `AppBar.BackAction` on Android). 
+Specifically `MaterialDesignIcons` icon pack needs to be included in the project, because some components use those internally (e.g. `AppBar.BackAction` on Android).
 
 ```bash npm2yarn
-npm install react-native-vector-icons
+npm install @react-native-vector-icons/common @react-native-vector-icons/material-design-icons
 ```
 
-The library has specified dedicated steps for each platform. Please follow their [installation guide](https://github.com/oblador/react-native-vector-icons#installation) in order to properly use icon fonts.
+:::note
+The `react-native-vector-icons` library requires some additional setup steps for each platform. To ensure proper use of icon fonts, please follow their [installation guide](https://github.com/oblador/react-native-vector-icons?tab=readme-ov-file#setup).
+:::
 
+If you use Expo, you don't need to install vector icons - those are the part of the expo package. However, if you have a `babel.config.js` or `.babelrc` file, make sure that it includes `babel-preset-expo`.
+
+:::info
 If you don't want to install vector icons, you can use [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require) to opt-out.
+:::note
 
-If you use Expo, you don't need to install vector icons. But if you have a `babel.config.js` or `.babelrc` file, make sure that it includes `babel-preset-expo`.
+### Bundle size optimization
 
 To get smaller bundle size by excluding modules you don't use, you can use our optional babel plugin. The plugin automatically rewrites the import statements so that only the modules you use are imported instead of the whole library. Add `react-native-paper/babel` to the `plugins` section in your `babel.config.js` for production environment. It should look like this:
 
@@ -54,7 +60,7 @@ module.exports = {
 If you created your project using Expo, it'll look something like this:
 
 ```js
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
@@ -136,7 +142,10 @@ Example:
 
 ```js
 import * as React from 'react';
-import { MD3LightTheme as DefaultTheme, PaperProvider } from 'react-native-paper';
+import {
+  MD3LightTheme as DefaultTheme,
+  PaperProvider,
+} from 'react-native-paper';
 import App from './src/App';
 
 const theme = {

docs/docs/guides/03-icons.mdx

@@ -8,27 +8,28 @@ import IconsList from '@site/src/components/IconsList.tsx';
 
 ## Configuring icons
 
-Many of the components require the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library to render correctly. If you're using Expo, you don't need to do anything extra, but if it's a vanilla React Native project, you need to link the library as described in the getting started guide.
+Many of the components require the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library to render correctly. If you're using Expo, you don't need to do anything extra, but if it's a vanilla React Native project, you need to link the library as described in the [getting started guide](./01-getting-started.md).
 
+:::note
 If you opted out of vector icons support using [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require), you won't be able to use icon names for the icon prop. Some components may not look correct without vector icons and might need extra configuration.
+:::
 
 ## Using the `icon` prop
 
 Many components such as `Button` accept an `icon` prop which is used to display an icon. The `icon` prop supports the following types of values:
 
 ### 1. An icon name
 
-You can pass the name of an icon from [`MaterialCommunityIcons`](https://materialdesignicons.com). This will use the [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons) library to display the icon.
+You can pass the name of an icon from [`MaterialDesignIcons`](https://pictogrammers.com/library/mdi/). This will use the [`@react-native-vector-icons/material-design-icons`](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons) library to display the icon.
 
 Example:
 
 ```js
-<Button icon="camera">
-  Press me
-</Button>
+<Button icon="camera">Press me</Button>
 ```
 
-<details><summary>See the list of supported icons</summary>
+<details>
+  <summary>See the list of supported icons</summary>
   <IconsList />
 </details>
 
@@ -39,17 +40,17 @@ You can pass an image source, such as an object of shape `{ uri: 'https://path.t
 Remote image:
 
 ```js
-<Button icon={{ uri: 'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400' }}>
+<Button
+  icon={{ uri: 'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400' }}
+>
   Press me
 </Button>
 ```
 
 Local image:
 
 ```js
-<Button icon={require('../assets/chameleon.jpg')}>
-  Press me
-</Button>
+<Button icon={require('../assets/chameleon.jpg')}>Press me</Button>
 ```
 
 ### 3. A render function
@@ -73,22 +74,22 @@ Example:
 
 ### 4. Use custom icons
 
-If you want to use icons other than `MaterialCommunityIcons` you need to import the icons and pass it to the `settings` prop within `PaperProvider`.
+If you want to use icons other than `MaterialDesignIcons` you need to import the icons and pass it to the `settings` prop within `PaperProvider`.
 
 Example:
 
 ```js
-import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import AwesomeIcon from '@react-native-vector-icons/fontawesome';
 // ...
 
-      <PaperProvider
-        settings={{
-          icon: props => <AwesomeIcon {...props} />,
-        }}
-        theme={this.state.theme}
-      >
-        // ...
-      </PaperProvider>
+<PaperProvider
+  settings={{
+    icon: (props) => <AwesomeIcon {...props} />,
+  }}
+  theme={this.state.theme}
+>
+  // ...
+</PaperProvider>;
 ```
 
 ## RTL support
@@ -102,17 +103,22 @@ If you want your icon to behave properly in a RTL environment, you can pass an o
 Example for using an image source:
 
 ```js
-<Button icon={{ source: { uri: 'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400' }, direction: 'rtl' }}>
+<Button
+  icon={{
+    source: {
+      uri: 'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400',
+    },
+    direction: 'rtl',
+  }}
+>
   Press me
 </Button>
 ```
 
 Example for using an icon name:
 
 ```js
-<Button icon={{ source: "add-a-photo", direction: 'rtl' }}>
-  Press me
-</Button>
+<Button icon={{ source: 'add-a-photo', direction: 'rtl' }}>Press me</Button>
 ```
 
 You can also use a render function. Along with `size` and `color`, you have access to `direction` which will either be `'rtl'` or `'ltr'`. You can then decide how to render your icon component accordingly.
@@ -131,8 +137,8 @@ Example of using a render function:
         {
           width: size,
           height: size,
-          tintColor: color
-        }
+          tintColor: color,
+        },
       ]}
     />
   )}

docs/docs/guides/05-react-native-web.md

@@ -32,25 +32,25 @@ module.exports = function override(config, env) {
     test: /\.js$/,
     exclude: /node_modules[/\\](?!react-native-vector-icons)/,
     use: {
-      loader: "babel-loader",
+      loader: 'babel-loader',
       options: {
         // Disable reading babel configuration
         babelrc: false,
         configFile: false,
 
         // The configuration for compilation
         presets: [
-          ["@babel/preset-env", { useBuiltIns: "usage" }],
-          "@babel/preset-react",
-          "@babel/preset-flow",
-          "@babel/preset-typescript"
+          ['@babel/preset-env', { useBuiltIns: 'usage' }],
+          '@babel/preset-react',
+          '@babel/preset-flow',
+          '@babel/preset-typescript',
         ],
         plugins: [
-          "@babel/plugin-proposal-class-properties",
-          "@babel/plugin-proposal-object-rest-spread"
-        ]
-      }
-    }
+          '@babel/plugin-proposal-class-properties',
+          '@babel/plugin-proposal-object-rest-spread',
+        ],
+      },
+    },
   });
 
   return config;
@@ -102,13 +102,9 @@ module.exports = {
 
   // Loaders and resolver config
   module: {
-    rules: [
-
-    ],
-  },
-  resolve: {
-
+    rules: [],
   },
+  resolve: {},
 
   // Development server config
   devServer: {
@@ -121,17 +117,22 @@ module.exports = {
 Also create a folder named `public` and add the following file named `index.html`:
 
 ```html
-<!doctype html>
+<!DOCTYPE html>
 <head>
-  <meta charSet="utf-8" />
+  <meta charset="utf-8" />
   <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
 
-  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
+  <meta
+    name="viewport"
+    content="width=device-width,minimum-scale=1,initial-scale=1"
+  />
 
   <title>App</title>
 
   <style>
-    html, body, #root {
+    html,
+    body,
+    #root {
       height: 100%;
     }
 
@@ -230,7 +231,7 @@ Use `asset/resource`, since `file-loader` was deprecated in webpack v5.
 }
 ```
 
-## Load the Material Community Icons
+## Load the Material Design Icons
 
 If you followed the getting started guide, you should have the following code in your root component:
 
@@ -240,16 +241,16 @@ If you followed the getting started guide, you should have the following code in
 </PaperProvider>
 ```
 
-Now we need tweak this section to load the Material Community Icons from the [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons) library:
+Now we need tweak this section to load the Material Design Icons from the [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons) library:
 
 ```js
 <PaperProvider>
   <React.Fragment>
     {Platform.OS === 'web' ? (
       <style type="text/css">{`
         @font-face {
-          font-family: 'MaterialCommunityIcons';
-          src: url(${require('react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf')}) format('truetype');
+          font-family: 'MaterialDesignIcons';
+          src: url(${require('@react-native-vector-icons/material-design-icons/fonts/MaterialDesignIcons.ttf')}) format('truetype');
         }
       `}</style>
     ) : null}

docs/docs/guides/09-bottom-navigation.md

@@ -195,7 +195,7 @@ navigation.jumpTo('Profile', { name: 'Michaś' });
 
 ```js
 import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 
 const Tab = createMaterialBottomTabNavigator();
 
@@ -212,7 +212,7 @@ function MyTabs() {
         options={{
           tabBarLabel: 'Home',
           tabBarIcon: ({ color }) => (
-            <MaterialCommunityIcons name="home" color={color} size={26} />
+            <MaterialDesignIcons name="home" color={color} size={26} />
           ),
         }}
       />
@@ -222,7 +222,7 @@ function MyTabs() {
         options={{
           tabBarLabel: 'Updates',
           tabBarIcon: ({ color }) => (
-            <MaterialCommunityIcons name="bell" color={color} size={26} />
+            <MaterialDesignIcons name="bell" color={color} size={26} />
           ),
         }}
       />
@@ -232,11 +232,11 @@ function MyTabs() {
         options={{
           tabBarLabel: 'Profile',
           tabBarIcon: ({ color }) => (
-            <MaterialCommunityIcons name="account" color={color} size={26} />
+            <MaterialDesignIcons name="account" color={color} size={26} />
           ),
         }}
       />
     </Tab.Navigator>
   );
 }
-```
+```

docs/package.json

@@ -23,6 +23,8 @@
     "@easyops-cn/docusaurus-search-local": "^0.33.4",
     "@material/material-color-utilities": "0.2.4",
     "@mdx-js/react": "^1.6.22",
+    "@react-native-vector-icons/common": "^11.0.0",
+    "@react-native-vector-icons/material-design-icons": "^7.4.47",
     "camelcase": "^7.0.1",
     "clsx": "^1.2.1",
     "color": "^4.2.3",
@@ -32,7 +34,6 @@
     "react-color": "^2.19.3",
     "react-dom": "17.0.2",
     "react-native-safe-area-context": "^4.5.0",
-    "react-native-vector-icons": "^9.2.0",
     "react-native-web": "^0.18.12",
     "use-latest-callback": "^0.1.7"
   },

docs/plugins/docusaurus-react-native-plugin.js

@@ -11,8 +11,8 @@ module.exports = function () {
             react: path.resolve('node_modules/react'),
             'react-native$': 'react-native-web',
             'react-native-paper': path.resolve('../src'),
-            'react-native-vector-icons': path.resolve(
-              'node_modules/react-native-vector-icons/dist'
+            'react-native-vector-icons/MaterialCommunityIcons': path.resolve(
+              'node_modules/@react-native-vector-icons/material-design-icons'
             ),
           },
           extensions: ['.web.js'],