The react-native-vector-icons (rnvi) is a popular library in the react-native world, which is compatible with react-native-web.
But there is a problem. When used with react-native-web, rnvi significantly increases the bundle size. Each ttf font has a corresponding GlyphMap, which is a json file that associates the icon's name with its Unicode value. Even if you use only one icon in your project, the entire GhyphMap and the entire ttf will be imported by esbuild during the bundling. Some GlyphMaps, such as Ionicons and MaterialCommunityIcons, are over 100 kb, and minimization has almost no effect. And the MaterialCommunityIcons.ttf, which is more than 900 kb, will be download into your app.
It can get even worse, because popular libraries as react-native-paper and @react-navigation/material-bottom-tabs depend on rnvi for the MaterialCommunityIcons font. You can opt-out rnvi using babel-plugin-optional-require, but, as you can infer, it doesn't work with esbuild. When you install one of these libraries in a react-native-web project, esbuild will ask you to install rnvi and will bundle the large GlyphMap for the MaterialCommunityIcons, even if you haven't used any icons in your project.
In this post, we will discuss some options to solve this problem.
Expo
Before we discuss the options, let me give you a suggestion. Use @expo/vector-icons instead of react-native-vector-icons, because @expo/vector-icons is distributed with ES modules, that allow tree-shaking and it will configure the icon font in your webpage automatically for you:
<html>
<head>
<style id="expo-generated-fonts" type="text/css">
@font-face {
font-family: material-community;
src: url(/assets/MaterialCommunityIcons-QCSDDVWU.ttf);
font-display: auto;
}
</style>
...
@expo/vector-icons allow the use of customized fonts or subsets of fonts created with Fontello or Icomoon. Unfortunately, these sites don't work with MaterialCommunityIcons.
Behind the scenes, @expo/vector-icons uses the library expo-font to do it. You can use these Expo libraries even out of a Expo project.
To use @expo/vector-icons with react-native-web and esbuild, configure your tsconfig.json/jsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"react-native": ["./node_modules/react-native-web"],
"react-native-vector-icons/MaterialCommunityIcons": [
"./node_modules/@expo/vector-icons/MaterialCommunityIcons.js"
]
}
}
}
You need to specify one alias for each icon font that you use.
Solutions
Removing MaterialCommunityIcons when you are not using any Icon with react-native-paper or react-navigation
If you are using react-native-paper or @react-navigation/material-bottom-tabs and you are not using any icon from MaterialCommunityIcons, you can remove it with the following plugin:
require('esbuild')
.build({
...
plugins: [{
name: 'remove-materialicons',
setup(build) {
build.onLoad({ filter: /MaterialCommunityIcons.js/ }, () => ({
loader: 'jsx',
contents: `
import * as React from 'react';
import { Text } from 'react-native';
export default ({ name, color, size, ...rest }) => (
<Text {...rest}
style={{backgroundColor: 'transparent', color, fontSize: size }}
pointerEvents="none"
selectable={false}
>□</Text>
);
`,
}))
},
},
]
})
For it to work you need to alias rnvi to @expo/vector-icons, according to the jsconfig.json/tsconfig.json above.
Using material-icons-subset
The best solution is to use the package material-icons-subset to create a subset of the MaterialCommunityIcons font.
npm i material-icons-subset
Pass a list of icon names to be included in the font as arguments in the command line:
material-icons-subset camera menu account-outline email archive
Or, you can pass the path for a config.json file:
material-icons-subset font-config.json
The config.json file must have an array called icons with the name of the icons to be included in the font:
{
"icons": [
"camera",
"menu",
"account-outline",
"tune",
"bookmark-outline",
"pause",
"arrow-left",
"archive",
"email"]
}
The library will create two files:
materialdesignicons-webfont.ttf and
materialdesignicons-webfont.json with the GlyphMap.
You need to alias MaterialCommunityIcons.ttf and MaterialCommunityIcons.json files to the respectively new files that you created with material-icons-subset.
Unfortunately, I couldn make it work in the jsconfig.json/tsconfig.json.
Therefore, you need to use a esbuild plugin to make it work:
const materialIconsPlugin = {
name: 'material-icons',
setup(build) {
build.onResolve({ filter: /MaterialCommunityIcons\.(ttf|json)/ }, (args) => ({
path: resolve(`./src/assets/materialdesignicons-webfont${parse(args.path).ext}`),
}))
},
}
Conclusion
That's it. Now you can use vector-icons with react-native-web and esbuild without compromising the bundle size of your app.
Top comments (0)