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

Question

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.

Answer 1

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 

Answer 2

Okay. So lets assume you use nextjs and react-native-web. I will give you a step by step breakdown on how you can make it work on web.

install all these packages yarn add react-native-vector-icons react-native-svg next-compose-plugins next-transpile-modules

Update your next.config.js

const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['react-native-vector-icons', 'react-native-svg']);

module.exports = withPlugins([withTM], {
  images: {
    disableStaticImages: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  webpack: (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      'react-native$': 'react-native-web',
    }
    config.resolve.extensions = [
      '.web.js',
      '.web.ts',
      '.web.tsx',
      ...config.resolve.extensions,
    ]
    config.module.rules.push(
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [ 'url-loader?limit=10000', 'img-loader' ]
      },
    );
    return config
  },
});

Go to node_modules/react-native-vector-icons/Fonts and copy all the fonts you need and paste them in your public folder, and just the way you add custom fonts to the project, you need to include all those fonts like so in your style.css

@font-face {
    src: url(Ionicons.ttf);
    font-family: "Ionicons";
}

@font-face {
    src: url(FontAwesome.ttf);
    font-family: "FontAwesome";
}

@font-face {
    src: url(MaterialIcons.ttf);
    font-family: "MaterialIcons";
}

@font-face {
    src: url(Feather.ttf);
    font-family: "Feather";
}

@font-face {
    src: url(MaterialCommunityIcons.ttf);
    font-family: "MaterialCommunityIcons";
}

In your _document.js file, make sure you include your style.css file like so

        <Head>
          <link href="/fonts/style.css" rel="stylesheet"/>
        </Head>

And finally import it import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

And set it <Icon name="google-play" size={30} color="#900" />

Voila!!!