Skip to content

Commit f98c81b

Browse files
docs: clarify vector icons auto-detection in v6 icon guides
1 parent 4f59c3e commit f98c81b

2 files changed

Lines changed: 15 additions & 28 deletions

File tree

‎docs/6.x/docs/guides/getting-started.mdx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,15 @@ Minimum requirements:
3232

3333
Follow the [React Native Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/).
3434

35-
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`.
35+
You also need to install [@react-native-vector-icons/material-design-icons](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons). It is the only icon package Paper detects, `@expo/vector-icons` is no longer picked up automatically:
36+
37+
```bash
38+
npx expo install @react-native-vector-icons/material-design-icons
39+
```
40+
41+
If you prefer to keep using `@expo/vector-icons`, pass a custom icon renderer to `PaperProvider` as described in the [Icons guide](./icons#4-use-custom-icons).
42+
43+
If you have a `babel.config.js` or `.babelrc` file, make sure that it includes `babel-preset-expo`.
3644

3745
</TabItem>
3846
<TabItem value="community-cli" label="Community CLI">
@@ -49,7 +57,7 @@ Minimum requirements:
4957

5058
Follow the [React Native Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/).
5159

52-
If you're on a vanilla React Native project, you also need to install [@react-native-vector-icons/material-design-icons](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons).
60+
You also need to install [@react-native-vector-icons/material-design-icons](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons). It is the only icon package Paper detects, the old single package `react-native-vector-icons` is no longer picked up.
5361

5462
Specifically, the `MaterialDesignIcons` icon pack needs to be included in the project because some components use those icons internally, such as `AppBar.BackAction` on Android.
5563

‎docs/6.x/docs/guides/icons.mdx‎

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,13 @@
22
title: Icons
33
---
44

5-
import TabItem from '@docs/components/TabItem';
6-
import Tabs from '@docs/components/Tabs';
75
import IconsList from '@docs/components/IconsList.tsx';
86

97
# Icons
108

119
## Configuring icons
1210

13-
Many of the components render icon names using [`@react-native-vector-icons/material-design-icons`](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons). In Expo projects this usually works without extra setup. In vanilla React Native projects, install the package and complete any required platform setup as described in the [getting started guide](./getting-started).
11+
Many of the components render icon names using [`@react-native-vector-icons/material-design-icons`](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons). It is the only icon package Paper detects, in Expo projects too, so install it and complete any required platform setup as described in the [getting started guide](./getting-started). Without it, icon names render as broken (the □ placeholder character). If you use another icon package, such as `@expo/vector-icons`, pass a [custom icon renderer](#4-use-custom-icons) instead. If you're upgrading from v5, the [migration guide](./migration#icons-only-react-native-vector-iconsmaterial-design-icons-is-auto-detected) explains this change in detail.
1412

1513
:::note
1614
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.
@@ -30,29 +28,10 @@ Example:
3028
<Button icon="camera">Press me</Button>
3129
```
3230

33-
:::note
34-
Choose the correct tab below based on your `react-native-vector-icons` version:
35-
36-
- Use **latest** tab if you're using the latest version of `@react-native-vector-icons/material-design-icons`
37-
- Use **10.x** tab if you're still using the old single package `react-native-vector-icons`, version `10.x`
38-
39-
If you are using `@expo/vector-icons`, please check their [searchable list of icons](https://icons.expo.fyi/).
40-
:::
41-
42-
<Tabs>
43-
<TabItem value="material-design-icons" label="latest">
44-
<details>
45-
<summary>See the list of supported icons</summary>
46-
<IconsList latest />
47-
</details>
48-
</TabItem>
49-
<TabItem value="material-community-icons" label="10.x">
50-
<details>
51-
<summary>See the list of supported icons</summary>
52-
<IconsList />
53-
</details>
54-
</TabItem>
55-
</Tabs>
31+
<details>
32+
<summary>See the list of supported icons</summary>
33+
<IconsList latest />
34+
</details>
5635

5736
### 2. An image source
5837

0 commit comments

Comments
 (0)