chore: update docs

Author: lukewalczak

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,12 +24,12 @@ 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.
@@ -54,7 +54,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 +136,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

@@ -18,17 +18,16 @@ Many components such as `Button` accept an `icon` prop which is used to display
 
 ### 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 +38,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 +72,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 +101,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 +135,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/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/material-design-icons': path.resolve(
+              'node_modules/@react-native-vector-icons/material-design-icons'
             ),
           },
           extensions: ['.web.js'],