Skip to content

Commit

Permalink
docs: add docs for how to use RNVI with react-native-web (#1601)
Browse files Browse the repository at this point in the history
* docs: add docs for using RNVI with react-native-web

We do this by adding some instructions on how to setup font-families via
App.css and a new 'troubleshooting' section on supporting JSX in webpack.

* docs: addresses review feedback, also fixes typos and improves clarity.
  • Loading branch information
doublethefish authored May 1, 2024
1 parent 3c6ac8b commit 364321b
Showing 1 changed file with 91 additions and 1 deletion.
92 changes: 91 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ For the integration of `.svg` files natively, you can explore [`react-native-vec
- [Android Setup](#android-setup)
- [macOS Setup](#macos-setup)
- [Windows Setup](#windows-setup)
- [React-native-web Setup](#react-native-web-setup)
- [Web Setup](#web-setup)
- [Upgrading](#upgrading)
- [Icon Component](#icon-component)
Expand Down Expand Up @@ -270,6 +271,68 @@ _Please note that after adding new fonts, you need to recompile your project._

By following these steps, you'll seamlessly integrate the vector icons library into your Windows project, leveraging the `react-native-windows` framework.
### React-native-web Setup
To port a react-native mobile app to web using `react-native-web` you just need to ensure the fonts are known on the web-app side.
You will need add the font-family for each font you use to your css
You can debug missing font-families by looking in the Developer console in your web browser when debugging your web app.
NOTE: if you're using webpack or similar you *may* need to configure webpack to handle loading of ttf fonts, using url-loader or file-loader. See [Web Setup](#web-setup) for more details.

In your `App.css` or similar add the font-family specifications:

```css
@font-face {
src: url(path/to/fonts/Ionicons.ttf);
font-family: "Ionicons";
}
@font-face {
src: url(path/to/fonts/FontAwesome.ttf);
font-family: "FontAwesome";
}
@font-face {
src: url(path/to/fonts/FontAwesome5_Brands.ttf);
font-family: "FontAwesome5_Brands";
font-weight: 400; /* Regular weight */
font-style: normal;
}
@font-face {
src: url(path/to/fonts/FontAwesome5_Regular.ttf);
font-family: "FontAwesome5_Regular";
font-weight: 400; /* Regular weight */
font-style: normal;
}
@font-face {
src: url(path/to/fonts/FontAwesome5_Solid.ttf);
font-family: "FontAwesome5_Solid";
font-weight: 900; /* Bold weight for solid */
font-style: normal;
}
@font-face {
src: url(path/to/fonts/MaterialIcons.ttf);
font-family: "MaterialIcons";
}
@font-face {
src: url(path/to/fonts/Feather.ttf);
font-family: "Feather";
}
@font-face {
src: url(path/to/fonts/MaterialCommunityIcons.ttf);
font-family: "MaterialCommunityIcons";
}
/* TODO: Add other icons fonts here */
```

### Web Setup

To integrate the library with your web project using [webpack](https://webpack.js.org/), follow these steps:
Expand Down Expand Up @@ -767,8 +830,35 @@ You probably didn't update the font files linked to your native project after up
Sometimes vendors decides to remove some icons from newer releases, this has nothing to do with this package. If you depend on an older version of a font you can add it as a [custom font](#custom-fonts).
#### Web-pack complains about unsupported JSX Syntax
You will need to add JSX support for `react-native-vector-icons` to your transpiler configuration e.g. babel.
For example, to add `react-native-vector-icons` to the list of modules that support JSX (if using webpack) you may need to add the relative path to `react-native-vector-icons` in the include section of your JSX config.
This may look something like the following if you are using Babel in webpack:
```diff
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: [
paths.appSrc,
+ // START - support for JSX in react-native-vector-icons
+ path.resolve(
+ __dirname,
+ // modify this path to be relative to you webpack config,
+ // "../node_modules/react-native-vector-icons", // <- most common
+ "../../../node_modules/react-native-vector-icons", // <- if using workspaces
+ ),
+ // END - support got react-native-vector-icons
],
loader: require.resolve("babel-loader"),
```
## License
This project is licenced under the [MIT License](http://opensource.org/licenses/mit-license.html).
Any bundled fonts are copyright to their respective authors and mostly under MIT or [SIL OFL](http://scripts.sil.org/OFL).
Any bundled fonts are copyright to their respective authors and mostly under MIT or [SIL OFL](http://scripts.sil.org/OFL).

0 comments on commit 364321b

Please sign in to comment.