reactjsreact-nativereact-native-webreact-native-vector-icons

How to use react-native-vector-icons with react-native-web?


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:

enter image description here

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.


Solution

  • 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