I've setup monorepo project with react-native
and react-native-web
. I am sharing the same codebase for Android, iOS and Web. after installed react-native-vector-icons I've run the code in all three platforms and it works fine in Android and iOS but not in Web.
In the web it looks like below:
I've set up Webpack
as per the description here
below is my Webpack
config config-overrides.js
:
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
// our packages that will now be included in the CRA build step
const appIncludes = [
resolveApp('src'),
resolveApp('../components/src'),
];
//below is the config for react-native-vector-icons
const ttf = {
test: /\.ttf$/,
loader: "file-loader",
include: path.resolve(__dirname, "../../node_modules/react-native-vector-icons"),
};
module.exports = function override(config, env) {
// allow importing from outside of src folder
config.resolve.plugins = config.resolve.plugins.filter(
plugin => plugin.constructor.name !== 'ModuleScopePlugin'
);
config.module.rules[0].include = appIncludes;
config.module.rules[1] = ttf; //add the react-native-vector-icons here
config.module.rules[2].oneOf[1].include = appIncludes;
config.module.rules[2].oneOf[1].options.plugins = [
require.resolve('babel-plugin-react-native-web'),
].concat(config.module.rules[2].oneOf[1].options.plugins);
config.module.rules = config.module.rules.filter(Boolean);
config.plugins.push(
new webpack.DefinePlugin({__DEV__: env !== 'production'})
);
return config
};
Below is the use of react-native-vector-icons
in my App.js
file
import Icon from 'react-native-vector-icons/dist/FontAwesome';
<Icon name="glass" size={24}/>
I don't know why the icons are not loading or what I missed to configure. Please help me. Thank you in advance.
After a lot of research finally, I found the solution as mentioned below:
add the TTF files and your custom font file into the public directory